Flutter中主题风格

Flutter中主题风格可通过Theme来定义，从而可实现整个App风格的统一。
一旦设置了Theme主题, 那么应用程序中的某些Widget, 就会直接使用主题的样式。

一、全局 Theme

      theme: ThemeData(
        // 1.亮度
          brightness: Brightness.light,
          // 2.primarySwatch传入不是Color, 而是MaterialColor(包含了primaryColor和accentColor)
          primarySwatch: Colors.red,
          // 3.primaryColor: 单独设置导航和TabBar的颜色
          primaryColor: Colors.orange,
          // 4.accentColor: 单独设置FloatingActionButton\Switch
          accentColor: Colors.green,
          // 5.Button的主题
          buttonTheme: ButtonThemeData(
              height: 25,
              minWidth: 10,
              buttonColor: Colors.yellow
          ),
          // 6.Card的主题
          cardTheme: CardTheme(
              color: Colors.greenAccent,
              elevation: 10
          ),
          // 7.Text的主题
          textTheme: TextTheme(
            body1: TextStyle(fontSize: 16, color: Colors.red),
            body2: TextStyle(fontSize: 20),

            display1: TextStyle(fontSize: 14),
            display2: TextStyle(fontSize: 16),
            display3: TextStyle(fontSize: 18),
            display4: TextStyle(fontSize: 20),
          )
      ),

假如此时我们另一个界面不想用全局配置的橘黄色，可能另一个界面是红色主题，此时正确的做法是在创建一个ThemeData,通过 Theme.of(context).copyWith(primaryColor: Colors.purple)来设置主题色， 示例代码如下：

class _OnePageState extends State<OnePage> {
  @override
  Widget build(BuildContext context) {
    return  Theme(
      data: Theme.of(context).copyWith(primaryColor: Colors.purple),
      child: Scaffold(
      appBar: AppBar(
        title: Text("主题2"),
      ),
      body: Text("第一页",
        style: Theme.of(context).textTheme.display3,), // This trailing comma makes auto-formatting nicer for build methods.
    ),);
  }
}

二、暗黑 Theme适配
目前很多应用程序都需要适配暗黑模式，尤其是iOS项目，上架到APPstore必须适配暗黑模式，那么用flutter开发的项目如何适配暗黑模式呢？依旧是使用MaterialApp里面的 Theme和dartTheme两个参数来配合，代码如下：

class _OnePageState extends State<OnePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '暗黑模式',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: HYHomePage(),
    );
  }
}

以上就是关于Theme的学习记录。
Demo下载