应用里有很多地方都需要显示用户名，在这个用户名的右边可以显示用户的订阅状态小图标。我们可以去定义一个用户名小部件。

在 lib/user/components 里面，新建一个文件，user_name.dart，在这个文件里定义一个小部件，名字是 UserName。

在小部件里添加几个属性， User 类型的 user， double? 类型的 fontSize，文字大小。再添加一个 double? 类型的 iconSize 小图标的大小，还有一个 Color? 类型的 color ，表示文字的颜色。

在构造方法里添加几个带名字的参数，required this.user，this.fontSize ，this.iconSize，默认值是 14，还有 this.color 。

然后在小部件的 build 方法里面，声明一个 Color? 名字是 iconColor，表示的是订阅小图标的颜色。下面声明一个 hasSubscription，值可以判断一下 user.subscription != null。

再声明一个 isPro，判断一下 hasSubscription 并且 user.subscription?.type 等于 pro 。 再声明一个 isStandard，标准订阅类型。判断 hasSubscription 并且 user.subscription?.type 等于 standard。

下面再根据用户的订阅类型设置一下小图标的颜色，判断一下，如果 isStandard，设置一下 iconColor。

订阅颜色

要使用的小图标的颜色可以放在一个配置里面，先打开 .env 这个文件，在这个文件里添加一个 STANDARD_SUBSCRIPTION_COLOR，值是 0xff43a047，复制一份，再声明一个 PRO_SUBSCRIPTION_COLOR，值是 0xff6e64ef。

打开 app_config.dart，在这个文件里添加两个静态的 getter 方法，static Color get，名字是 standardSubscriptionColor，返回的值可以用一下 Color ，给它提供的值可以用 int.parse 处理一下，dotenv.get，得到 STANDARD_SUBSCRIPTION_COLOR 的值。

这里需要用的 Color 要导入一样东西，可以导入 material 。

复制一份，再声明一个 proSubscriptionColor，用 dotenv.get 得到 PRO_SUBSCRIPTION_COLOR 的值。

user_name

回到 user_name，设置一下 iconColor，让它等于 AppConfig.standardSubscriptionColor。复制一份这个判断，判断一下 isPro，如果是专业版的订阅，iconColor 的值就是 AppConfig.proSubscriptionColor。

下面声明一个 userName ，值是一个 Text 小部件，文字是 user 里的 name!， 用 style 设置一下文字样式，TextStyle，fontSize 设置成 fontSize，color 设置成 color。

在这个用户名的下面，再声明一个 subscriptionIcon，表示订阅小图标，新建一个 Container 小部件，用 padding 设置一下边距，EdgeInsets.only，left 是 4 。 child 可以新建一个 SubscriptionIcon，把 size 设置成 iconSize，把 color 设置成 iconColor。

小部件最终 return 的是一个 Container，它的 child 可以用一个 Row 小部件，提供一个 children ，里面添加一个 userName，然后判断一下 hasSubscription ，如果用户有订阅，就在这个用户名里面再添加一个 subscriptionIcon。