我用 Sketch 提前给我们要做的应用画了一个草图,你会发现,这个应用的主要颜色是黑色,下面我们可以去自定义一下应用的主题颜色。
在很多小部件里面可以通过一些属性设置小部件的一些样式,如果不去设置这些样式属性的值,它们一般都会使用一个默认的主题样式。这个默认的主题我们也可以去定制一下,可以把它放在一个 MaterialApp 小部件的 theme 属性里面。
在 App 这个小部件里,用了一个 MaterialApp 小部件,在这个小部件里可以添加了一个 theme 属性,它的值是 ThemeData。
这个 ThemeData 里面支持很多属性,按住 alt 键,点一下 ThemeData 可以打开定义它的文件,你会发现,这个 ThemeData 可以自定义应用主题的各种颜色,文字的主题,还可以定制一些小部件的主题,比如 AppBar,TabBar,Card 这些小部件的主题。
如果你想定制应用里的不同东西的颜色,或者某些小部件的主题样式,可以在这个 ThemeData 里面找找,看看有没有对应的属性。通过这些属性的名字,大概就可以判断出它影响的主题样式是什么。
回到 app.dart,我们先在这个 ThemeData 里面,添加一个 primaryColor 设置一下主题的主要颜色,可以用一下 Colors.black,它表示的是黑色。
你会发现,现在界面上 AppBar 这个小部件的背景颜色就变成了黑色,说明默认情况下这个 AppBar 的背景颜色用的就是主题的主要颜色,也就是 primaryColor。
主题的次要颜色可以用 accentColor 这个属性设置一下,很多小部件里面也会用到这个 accentColor 设置的颜色,可以使用一种浅一点的黑色。 设置成 Colors.black87。
这里我们是在这个 MaterialApp 小部件里设置的主题样式,这里的设置会影响它下面的所有的子部件。小部件会使用离它最近的主题样式,也就是我们可以在任何地方覆盖或者改变主题样式。