![Flutter实战指南](https://wfqqreader-1252317822.image.myqcloud.com/cover/384/32858384/b_32858384.jpg)
上QQ阅读APP看书,第一时间看更新
2.17 深入学习Google的Material Design设计体系
小部件使用了Material Design设计体系,Material Design看起来如图2.25所示。
谷歌的手机应用和Web应用经常使用Material Design,它是由谷歌开发的,可以被自定义,如改变它的颜色等。Material Design在iOS上表现也很好。
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P58_1774.jpg?sign=1739586615-Ofr57qgq3mJ9GsmSKwnMJZXzmOhBNEz5-0-edc5e4ee93df1ba51df17b33726ea9c7)
图2.25 Material Design
第1章我们提到过Material Design已经植入到Flutter中了,所以可以直接使用Material Design来设计。可以拿来即用,不需要任何设计工作。我们可以调节主题,在main.dat文件中给MaterialApp添加参数theme,theme的参数值为ThemeData对象,ThemeData也是来自flutter/material包,ThemeData需要传入一组颜色或样式的数据,代码如下:
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P59_11772.jpg?sign=1739586615-rvE9hLjYGmvJUsEg7FiIO1v6uLRTjySW-0-b7532d058790045acecd47a61d219d2e)
Colors定义颜色,颜色是一组静态变量,可以通过加点来调用,例如Colors.deepOrange。保存一下,在模拟器中会发现标题栏的颜色发生了变化。
如果通过主题设置按钮的颜色,可以在NewsManager中设置按钮的color属性,代码如下:
![](https://epubservercos.yuewen.com/DB634B/17640317207889506/epubprivate/OEBPS/Images/Figure-P59_11773.jpg?sign=1739586615-6FmVURFKnwXenM6IFgTyZicmTxsuxUDz-0-78dfa60492bc14845482b9c69d9b3cf3)
Flutter提供一个特殊对象Theme,可调用of()方法,并传递一个context参数,context中保存着元数据信息,例如我们App的主题,然后调用primaryColor,保存后,按钮变成了橙色。