為您的 Flutter 應(yīng)用設(shè)置主題：ThemeData 和 ColorScheme 指南

在媒體和其他來源中有許多關(guān)于這個主題的文章，那么這篇文章的必要性是什么？

在本文中，我計(jì)劃僅關(guān)注 ThemeData 小部件的關(guān)鍵點(diǎn)以及我的開發(fā)經(jīng)驗(yàn)中最常用的參數(shù)，并且您將獲得有關(guān)每個參數(shù)如何對您的應(yīng)用程序執(zhí)行操作的簡要說明。

你好奇嗎？繼續(xù)閱讀??。

使用 ThemeData 的主要好處

• 保持統(tǒng)一的外觀：定義一個單一的 ThemeData 對象，該對象封裝了應(yīng)用程序的調(diào)色板、字體、形狀和其他視覺元素。在所有屏幕上一致應(yīng)用該主題，確保品牌識別的一致性和可識別性。
• 為不同的主題設(shè)計(jì)不同的版本：為淺色和深色模式、應(yīng)用分區(qū)或用戶首選項(xiàng)定義多個 ThemeData 對象。
• 只需定義一次主題，即可在任何地方使用它們：無需手動設(shè)置單個小組件的視覺樣式，而是在應(yīng)用中應(yīng)用適當(dāng)?shù)?ThemeData 小組件。這減少了代碼重復(fù)并簡化了維護(hù)。
• 集中控制和更新：對 ThemeData 對象進(jìn)行更改，這些更改會自動傳播到整個應(yīng)用，從而確保一致性并減少重復(fù)編輯的需要。
• 創(chuàng)建無障礙變體：為有特定無障礙需求的用戶建立單獨(dú)的主題數(shù)據(jù)對象，例如為視覺障礙用戶建立高對比度主題。

現(xiàn)在你已經(jīng)熟悉了 ThemeData 對你的幫助，那么如何在你的應(yīng)用程序中實(shí)現(xiàn)它呢？??

這是一個在 Flutter 應(yīng)用程序中實(shí)現(xiàn)深色和淺色主題的基本主題的小指南。

創(chuàng)建全局類

第一步是創(chuàng)建一個全局類，用于在應(yīng)用程序中管理 ThemeData。該類包含一個方法，用于使用 ColorSheme 創(chuàng)建不同的 ThemeData 實(shí)例。

class GlobalThemData {
  static ThemeData themeData(ColorScheme colorScheme, Color focusColor) {
    return ThemeData(colorScheme: colorScheme, focusColor: focusColor);
  }
}

focusColor : 該顏色用于 TextFields 和 TextFormField 等 widget，以指示該 widget 是否有主焦點(diǎn)。

ColorSheme ：基于 Material 規(guī)范的一組 30 種顏色，可用于配置大多數(shù)組件的顏色屬性。

我們可以在本文后面更詳細(xì)地討論 ColorSheme 。

現(xiàn)在，我們可以創(chuàng)建更多可直接從 GlobalThemData 類訪問的公有變量。

lightColorScheme：持有淺色主題的 ColorSheme。

darkColorScheme：持有暗色主題的 ColorSheme。

lightThemeData：持有淺色主題的 ThemeData。

darkThemeData：持有深色主題的 ThemeData。

class GlobalThemData {
  static final Color _lightFocusColor = Colors.black.withOpacity(0.12);
  static final Color _darkFocusColor = Colors.white.withOpacity(0.12);
  static ThemeData lightThemeData = themeData(lightColorScheme, _lightFocusColor);
     
  static ThemeData darkThemeData = themeData(darkColorScheme, _darkFocusColor);
  static ThemeData themeData(ColorScheme colorScheme, Color focusColor) {
    return ThemeData(colorScheme: colorScheme, focusColor: focusColor);
  }
  static const ColorScheme lightColorScheme = ColorScheme();
  static const ColorScheme darkColorScheme = ColorScheme();
}

如果您和我一起編碼，您可能會在 ColorSheme() 上收到必需的參數(shù)錯誤警告。

我們可以在下一步中解決這個問題。

ColorSheme

ColorSheme 中的顏色是成對的；第一個是顏色本身，第二個是可用于該顏色的顏色，如文本和其他元素。

這 10 種顏色對于為 Flutter ThemData 創(chuàng)建 ColorSheme 是必需的，每種顏色的值都是可選的。

• primary：這是應(yīng)用程序中最常用的顏色
• onPrimary：此顏色用于為原色之上的元素（例如文本、圖標(biāo)等）著色。
• secondary：這定義了一種輔助顏色，通常用于不太顯眼的元素，如濾鏡芯片、切換按鈕或背景元素，這些元素需要從主色中脫穎而出，但又不能喧賓奪主。
• onSecondary：該顏色用于為次要顏色上的元素著色。
• error：這是用于錯誤消息或警報(bào)的顏色，例如閃爍的紅燈表示問題。
• onError：這是與 error 顏色相得益彰的文本顏色，例如紅色標(biāo)志上的白色文本，便于閱讀。
• background：整個應(yīng)用程序的主要背景色。將其視為放置所有其他 UI 元素的畫布。
• onBackground：該顏色用于為背景色上的元素著色。
• surface：用作卡片、工作表、對話框等高級 UI 元素的基色。

因此，我們可以按如下方式設(shè)置我們的 lightColorScheme and darkColorScheme 變量。

static const ColorScheme lightColorScheme = ColorScheme(
    primary: Color(0xFFB93C5D),
    onPrimary: Colors.black,
    secondary: Color(0xFFEFF3F3),
    onSecondary: Color(0xFF322942),
    error: Colors.redAccent,
    onError: Colors.white,
    background: Color(0xFFE6EBEB),
    onBackground: Colors.white,
    surface: Color(0xFFFAFBFB),
    onSurface: Color(0xFF241E30),
    brightness: Brightness.light,
  );

static const ColorScheme darkColorScheme = ColorScheme(
    primary: Color(0xFFFF8383),
    secondary: Color(0xFF4D1F7C),
    background: Color(0xFF241E30),
    surface: Color(0xFF1F1929),
    onBackground: Color(0x0DFFFFFF),
    error: Colors.redAccent,
    onError: Colors.white,
    onPrimary: Colors.white,
    onSecondary: Colors.white,
    onSurface: Colors.white,
    brightness: Brightness.dark,
  );

現(xiàn)在，我們?yōu)闇\色和深色主題設(shè)置了一個 ColorScheme，那么如何在主題數(shù)據(jù)中使用它呢？

創(chuàng)建 ThemeData

我們需要修改 GlobalThemeData 中的 themeData 方法，為 ThemeData 創(chuàng)建一個合適的值 ColourScheme，并傳遞給它。

static ThemeData themeData(ColorScheme colorScheme, Color focusColor) {
    return ThemeData(
        colorScheme: colorScheme,
        canvasColor: colorScheme.background,
        scaffoldBackgroundColor: colorScheme.background,
        highlightColor: Colors.transparent,
        focusColor: focusColor
       );
  }

• canvasColor: 這是整個屏幕或應(yīng)用程序窗口的背景色。它定義了所有其他 UI 元素的基色。
• scaffoldBackgroundColor: 這具體定義了腳手架本身的背景顏色，包括應(yīng)用欄、正文內(nèi)容區(qū)域和底部導(dǎo)航欄（如果存在）。
• highlightColor: 該屬性定義了用戶點(diǎn)擊并按住 Widget 時短暫顯示的顏色。它為用戶提供了交互已注冊的視覺反饋。
• focusColor：該屬性定義了用于直觀顯示當(dāng)前哪個元素具有焦點(diǎn)的顏色，這意味著該元素將接收鍵盤輸入。這對于突出顯示當(dāng)前活動元素，吸引用戶注意非常有用。

這些只是示例，還有許多其他選項(xiàng) ThemeData 可供您探索。

因此，我們最終的 GlobalThemeData 類應(yīng)該是這樣的：

class GlobalThemData {
  static final Color _lightFocusColor = Colors.black.withOpacity(0.12);
  static final Color _darkFocusColor = Colors.white.withOpacity(0.12);
  static ThemeData lightThemeData =
      themeData(lightColorScheme, _lightFocusColor);
  static ThemeData darkThemeData = themeData(darkColorScheme, _darkFocusColor);
  static ThemeData themeData(ColorScheme colorScheme, Color focusColor) {
    return ThemeData(
      colorScheme: colorScheme,
      canvasColor: colorScheme.background,
      scaffoldBackgroundColor: colorScheme.background,
      highlightColor: Colors.transparent,
      focusColor: focusColor
    );
  }
  static const ColorScheme lightColorScheme = ColorScheme(
    primary: Color(0xFFB93C5D),
    onPrimary: Colors.black,
    secondary: Color(0xFFEFF3F3),
    onSecondary: Color(0xFF322942),
    error: Colors.redAccent,
    onError: Colors.white,
    background: Color(0xFFE6EBEB),
    onBackground: Colors.white,
    surface: Color(0xFFFAFBFB),
    onSurface: Color(0xFF241E30),
    brightness: Brightness.light,
  );
  static const ColorScheme darkColorScheme = ColorScheme(
    primary: Color(0xFFFF8383),
    secondary: Color(0xFF4D1F7C),
    background: Color(0xFF241E30),
    surface: Color(0xFF1F1929),
    onBackground: Color(0x0DFFFFFF),
    error: Colors.redAccent,
    onError: Colors.white,
    onPrimary: Colors.white,
    onSecondary: Colors.white,
    onSurface: Colors.white,
    brightness: Brightness.dark,
  );
}

是的！我們剛剛為我們的應(yīng)用程序創(chuàng)建了一個漂亮的主題?，F(xiàn)在怎么辦？

設(shè)置 ThemeData

在 MaterialApp 中設(shè)置所需的主題。

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      themeMode: ThemeMode.light, //or ThemeMode.dark
      theme: GlobalThemData.lightThemeData,
      darkTheme: GlobalThemData.darkThemeData,
      home: const ShowCaseHome(),
    );
  }
}

這將為您的應(yīng)用程序提供默認(rèn)的淺色主題，您可以將模式更改為深色。您可以探索 InheritedWidget 或 Provider 的強(qiáng)大功能，以實(shí)現(xiàn)動態(tài)切換。這不在本文的討論范圍之內(nèi)，如有需要，我們可以在今后的文章中詳細(xì)討論。

希望您能得到一些有價值的信息，感謝您的閱讀??。