簡介
一般情況下我們在flutter中搭建的app基本上都是用的是MaterialApp這種設計模式，MaterialApp中為我們接下來使用的按鈕，選單等提供了統一的樣式，那麼這種樣式能不能進行修改或者自定義呢？
答案是肯定的，一起來看看吧。
MaterialApp中的themes
MaterialApp也是一種StatefulWidget,在MaterialApp中跟theme相關的屬性有這樣幾個：
final ThemeData? theme;
final ThemeData? darkTheme;
final ThemeData? highContrastTheme;
final ThemeData? highContrastDarkTheme;
final ThemeMode? themeMode;先來看下ThemeMode的定義：
enum ThemeMode {
system,
light,
dark,
}ThemeMode是一個列舉類，裡面有三個列舉值，分別是system，light和dark。
我們都知道現在手機有一個暗黑模式，ThemeMode的這三種模式就是為了適應暗黑模式而生的。
system表示是系統預設的模式，light是明亮模式，dark是暗黑模式。
而ThemeData則定義了主題中各種元件或者行動的配色。
那麼如果我們想要實現自定義themes的功能，就可以利用這個ThemeData類來重寫其中要重寫的顏色。
ThemeData中還有專門為color變化定義的ColorScheme，還有為Text變化設定的TextTheme，這兩個theme實際上是一系列的color集合。
除了ThemeData，flutter中還有一個類叫做Theme。
Theme是一個StatelessWidget，這個widget中包含了ThemeData，它提供了一個Theme.of方法來讓子widget獲得最近的ThemeData資料。
這就意味著，在flutter中，子widget可以使用和父widget不同的主題，非常的棒。
自定義themes的使用
那麼如何使用自定義themes呢？有兩種方式。
第一種就是在使用MaterialApp的時候傳入自定義的themes，如下所示：
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}但是這種操作實際是傳入了一個全新的ThemeData，假如我們只想修改部分ThemeData中的資料應該如何處理呢？
我們可以使用Theme.of方法從當前的Theme中複製一份，然後再呼叫copyWith方法，傳入要修改的自定義屬性即可。
如下所示：
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: Theme.of(context).copyWith(useMaterial3: true),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}前面我們提到了Theme這個widget，我們還可以將要自定義Theme的widget用Theme包裹起來，理論上我們可以將任何widget都用Theme來進行包裝。
比如之前的floatingActionButton的實現是直接返回一個FloatingActionButton：
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
)然後我們可以把FloatingActionButton用Theme包裝起來，如下所示：
floatingActionButton: Theme(
data: Theme.of(context).copyWith(focusColor: Colors.yellow),
child: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
)這樣不同的元件就擁有了不同的theme。
總結
當我們需要自定義theme或者不同theme的時候，就可以考慮使用本文中使用的方法來進行theme的自定義了。