flutter 主題ThemeData

單個路由換膚（ThemeData）,掌握局部覆蓋全局

代碼相關解釋：
1.可以通過局部主題覆蓋全局主題。上述代碼中的通過Theme組件為第二行圖標指定固定顏色（橘黃色）一樣。Flutter會經常使用這種方法來自定義子樹主題。

2.Flutter是怎么讓局部主題覆蓋全局主題的？

答：主要是因為Widget中使用主題樣式是通過Theme.of(BuildContext context)來獲取的。

import 'package:flutter/material.dart';

void main() {
  runApp( MaterialApp(
    title: 'Flutter gesture',
//    home: TutorialHome(),
    home: _home(),
  ));
}

class _home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,//相對於整個應用換膚，可以修改MaterialApp的theme屬性
      ),
      home: ThemeRouteDemo(),
    );
  }
}

class ThemeRouteDemo extends StatefulWidget {
  @override
  _ThemeRouteDemoState createState() => _ThemeRouteDemoState();
}

class _ThemeRouteDemoState extends State<ThemeRouteDemo> {

  Color _themeColor = Colors.green; //當前路由主題色 (改變主題色)


  @override
  Widget build(BuildContext context) {
    ThemeData themeData = Theme.of(context);
    return Theme(
      data: ThemeData(
        primarySwatch: _themeColor,//用於導航欄、FloatingActionButton的背景色等
        iconTheme: IconThemeData(color: _themeColor),//用於Icon顏色
      ),
      child: Scaffold(
        appBar: AppBar(
          title: Text('ThemeData實現路由換膚'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            //第一行Icon使用主題中的iconTheme
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(Icons.favorite),
                Icon(Icons.pregnant_woman),
                Text(' 顏色跟隨主題'),
              ],
            ),

            //給第二行Icon自定義顏色（固定為某個顏色）
            Theme(
              data: themeData.copyWith(
                iconTheme: themeData.iconTheme.copyWith(
                  color: Colors.orange,
                ),
              ),
              child:Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.send),
                  Icon(Icons.explore),
                  Text(' 顏色固定橘黃色'),
                ],
              ),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () =>
              setState(() =>
              _themeColor = _themeColor==Colors.green ? Colors.orange : Colors.green,
              ),
          child: Icon(Icons.palette),
        ),
      ),
    );
  }
}

跑起來少年！！！

相對於整個應用換膚，可以修改MaterialApp的theme屬性。