用户登录

用户如果订阅过我们的应用,可以在他的用户名的旁边显示一个表示订阅的小图标。

在我们准备好的 nid_flutter_assets 里面有一个 icons 目录,打开它里面的 subscription ,再打开 fonts ,这个目录里有一个字体,里面就是我提前准备好的字体图标。

打开我们的项目所在的目录,然后打开 assets ,新建一个目录,名字是 fonts,把这个字体文件复制一份放在项目资源目录里的这个 fonts 目录里面。 回到上一级目录。

另外还得再复制一个 dart 文件,打开项目里的 lib/app 目录,新建一个目录,名字是 icons,把这个 subscription_icon.dart 复制一份放在项目的这个 icons 目录的下面。

subscription_icon

回到项目,在 lib 下面新建一个 subscription/components 目录,里面添加一个 subscription_icon.dart 。文件里新建一个小部件,名字是 SubscriptionIcon 。

里面添加几个属性,Color? 类型的 color,double? 类型的 size ,再添加一个 String? 类型的 iconName 。在构造方法里添加几个带名字的参数,this.color,this.size 默认值是 24,再添加一个 this.iconName 。

小部件的 build 方法里面,声明一个 IconData ,名字是 icon,等于 Subscription 里的 diamond ,这个小图标就是一开始我们准备好的那个。

下面判断一下,如果 iconName 等于 thin,重新设置 icon ,让它等于 Subscription.diamond_thin 这个小图标。

这个 Container 的 child 可以换成一个 Icon 小部件,小图标可以使用 icon 表示,再设置一下 color,值是 color,还有 size ,值是 size。

字体资源

因为我们在项目里添加了新的字体资源,所以需要再处理一下,打开 pubspec.yaml ,找到这个文件里的 fonts, 取消注释这块代码。在这个 fonts 的下面,可以列出在项目里添加的一些字体资源。

family 是字体的名字,这里要设置成 Subscription,然后在 fonts ,asset 下面设置一下资源的位置,assets/fonts 下面的 Subscription.ttf 。

最后你可以找一个小部件,在里面用一下我们创建的 SubscriptionIcon 这个小图标,一切正常的话应该会显示一个钻石小图标。

定义订阅图标小部件(SubscriptionIcon)《 Flutter 移动端实例:修复改进 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点