Flutter 主题设置及夜间模式

/// 全局主题在MaterialApp的theme属性
/// 全局生效
new MaterialApp(
  title: 'demo',
  theme: new ThemeData( // 这里就是参数
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],
  ),
);

/// 假如我们要给FloatingActionButton设置主题样式
/// 直接写个Theme包裹FloatingActionButton组件
/// 然后设置data，接收类型依然是ThemeData，里面填写我们的参数
/// （如果没有设置局部主题则默认使用全局主题）
new Theme(
  data: new ThemeData(
    accentColor: Colors.yellow,
  ),
  child: new FloatingActionButton(
    onPressed: () {},
    child: new Icon(Icons.add),
  ),
);

/// 扩展父主题时无需覆盖所有的主题属性，可以通过使用copyWith方法来实现
new Theme(
  data: Theme.of(context).copyWith(accentColor: Colors.yellow),
  child: new FloatingActionButton(
    onPressed: null,
    child: new Icon(Icons.add),
  ),
);

/// defaultTargetPlatform在foundation包里。
/// 
/// 我们也可以使用io包里的Platform来进行判断。
/// 那么判断就是
/// theme: Platform.isIOS ? iOSTheme : AndroidTheme,
new MaterialApp(
  theme: defaultTargetPlatform == TargetPlatform.iOS
      ? iOSTheme
      : AndroidTheme,
  title: 'Flutter Theme',
  home: new MyHomePage(),
);

class Config {
  static bool dark = true; // 是否为黑夜模式
  static ThemeData themeData = new ThemeData.dark(); // 主题为暗色
}

import 'package:flutter/material.dart';
import 'global_config.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(title: "Flutter高级进阶", home: new MyScaffold());
  }
}

class MyScaffold extends StatefulWidget {
  @override
  _MyScaffoldState createState() => _MyScaffoldState();
}

class _MyScaffoldState extends State<MyScaffold> {
  /*
  * 主题改变
  * */
  changeTheme() {
    if (Config.dark) {
      Config.themeData = new ThemeData(
        primaryColor: Colors.white,
        scaffoldBackgroundColor: new Color(0xFFEBEBEB),
      );
      Config.dark = false;
    } else {
      Config.themeData = new ThemeData.dark();
      Config.dark = true;
    }
    setState(() {});
  }

  Widget body(context) {
    return new ListView(
      children: <Widget>[
        new Container(
          width: MediaQuery.of(context).size.width / 4, // 整宽除4
          child: new GestureDetector(
            onTap: () => changeTheme(), // 触发更换主题的事件
            child: new Column(
              children: <Widget>[
                new FlutterLogo(
                  size: 150.0,
                  style: FlutterLogoStyle.horizontal,
                  duration: Duration(milliseconds: 100),
                  textColor: Theme.of(context).colorScheme.background, // 从上下文拿到背景
                ),
                new Text( // 如果为黑夜模式则按钮文字为白天模式，否则文字显示为黑夜模式
                  '点击Logo更换${Config.dark ? "白天模式" : "黑夜模式"}',
                  style: new TextStyle(fontSize: 25.0),
                ),
              ],
            ),
          ),
        ),
        new MaterialButton( // 跳转按钮
          onPressed: () {
            Navigator.of(context).push(new MaterialPageRoute(
                builder: (context) => new NewPage('Flutter高级进阶页面二')));
          },
          child: new Text('跳转到新页面'),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Theme( // 主题组件，可设置局部的主题样式
      data: Config.themeData, // 设置为配置的主题数据
      child: new Scaffold(
        appBar: new AppBar(elevation: 0),
        body: body(context), // 身体页面body
      ),
    );
  }
}

class NewPage extends StatefulWidget {
  final String title; // 接收的标题

  NewPage(this.title);

  @override
  _NewPageState createState() => new _NewPageState(); // 创建有状态页面
}

class _NewPageState extends State<NewPage> {
  @override
  Widget build(BuildContext context) {
    return new Theme(
      child: new Scaffold( // title就是我们的标题
        appBar: new AppBar(title: new Text('页面：${widget.title}'), elevation: 0),
        body: new Center(
          child: new Text(
            '这是${widget.title}',
            style: TextStyle(fontSize: 30.0),
          ),
        ),
      ),
      data: Config.themeData, // 设置为配置的主题数据
    );
  }
}