flutter系列之:在flutter中自定義themes

flydean發表於2023-03-06
Flutter

簡介

一般情況下我們在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的自定義了。

本文的例子：https://github.com/ddean2009/learn-flutter.git

相關文章