用户登录

下面我们可以再定制一下应用栏小部件的主题。在 app_theme.dart 里面,声明一个 appBarTheme,它的值是一个 AppBarTheme ,设置一下 elevation ,值是 1 ,再把 backgroundColor 背景色设置成 Colors.white 。

再设置一下应用栏里小图标主题,iconTheme,值是 IconThemeData,用 color 设置一下小图标的颜色,这里是 Colors.black。

然后设置一下应用栏的文本主题,textTheme,值是 TextTheme,可以设置一下 headline6 这种文字的样式,默认应用栏的标题文字会使用这种样式,值是一个 TextStyle ,color 设置成 Colors.black,再把 fontSize 设置成 20。

复制一份这个 appBarTheme,再定义一个 appBarThemeDark,修改一下 backgroundColor,值是一个 Color,0xff2e2e2e。

iconTheme 里的 color 设置成 Colors.grey,textTheme 里的 headline6 的颜色设置成 Colors.grey。

在 light 主题里面,设置一下 appBarTheme,值是 appBarTheme。在 dark 主题里面,把 appBarTheme 设置成 appBarThemeDark。

测试

重新启动一下应用,在模拟器上观察一下这个应用栏的样式。再切换成亮色主题观察一下,使用亮色主题的时候有两个问题,一个是标签栏的文字看不见了,还有就是应用标志也看不见了,因为它们的颜色是白色,所以看不见了。后面我们再解决这两个问题。

应用栏主题(AppBarTheme)《 Flutter 2:主题样式 》

统计

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

社会化网络

关于

微信订阅号

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