[筆記] Flutter開發：文字樣式篇

/ Flutter, UIUX

在 Flutter 中，Material Typography 是一組符合 Material Design 標準的預設文字樣式。這些樣式經過精心設計，用於提供一致性和易讀性，適合應用的標題、正文和其他文字元素。Flutter 提供了 Typography 類，讓您可以輕鬆地使用 Material Design 中推薦的排版樣式。

Material Typography 組成

Material Typography 的文字樣式分為多個等級，適合不同的文字用途。這些等級包括：

  1. Display Styles（顯示樣式）
    1. displayLarge, displayMedium, displaySmall：通常用於非常突出的標題，例如應用程序的主要標題。
    2. 字體相對較大，適合用於需要強調和吸引眼球的文字。
  2. Headline Styles（標題樣式）
    1. headlineLarge, headlineMedium, headlineSmall：適合次要標題，比 Display 更小一些，用於模組標題、列表標題等。
    2. 這些樣式仍然具有一定的顯著性，但比 Display 顯得稍微內斂。
  3. Title Styles（標題樣式）
    1. titleLarge, titleMedium, titleSmall：適合用於段落或小節的標題。
    2. 尺寸較小，但具有視覺上的層次感，適合次級信息或說明性文字的標題。
  4. Label Styles（標籤樣式）
    1. labelLarge, labelMedium, labelSmall：適合按鈕或其他小的標籤文字。
    2. 標籤字體清晰簡潔，易於快速閱讀，適合顯示在按鈕、表單標籤等小型控件上。
  5. Body Styles（正文樣式）
    1. bodyLarge, bodyMedium, bodySmall：適合段落和正文文字。
    2. bodyMedium 和 bodySmall 常用於大段文字敘述或注釋信息，提供良好的可讀性。

使用 Typography 設置 Material 文字樣式

Flutter 提供了 Typography.material2018() 和 Typography.material2021() 等預設文字樣式，可以根據應用的需求來選擇合適的 Material Design 樣式標準。通過 ThemeData.typography 屬性，我們可以直接使用這些預設樣式。

範例：設置 Material Typography 樣式

MaterialApp(
  theme: ThemeData(
    typography: Typography.material2018(), // 使用 2018 年的 Material Design 標準
  ),
  home: MyHomePage(),
);

在 TextTheme 中使用 Material Typography 樣式

TextTheme 類包含所有 Material Typography 樣式，可通過 Theme.of(context).textTheme 訪問這些預設樣式。

Text(
  'This is a headline',
  style: Theme.of(context).textTheme.headlineLarge,
);

Text(
  'This is body text',
  style: Theme.of(context).textTheme.bodyMedium,
);

Text(
  'This is a button label',
  style: Theme.of(context).textTheme.labelLarge,
);

自定義 Typography

您還可以在 TextTheme 中覆寫預設樣式，以匹配應用的特定需求。例如，您可以自定義 headline1 的字體大小或顏色。

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      headlineLarge: TextStyle(
        fontSize: 28.0,
        fontWeight: FontWeight.bold,
        color: Colors.deepPurple,
      ),
      bodyMedium: TextStyle(
        fontSize: 16.0,
        color: Colors.grey[700],
      ),
    ),
  ),
  home: MyHomePage(),
);

總結

Material Typography 提供了豐富且一致的文字樣式層次，用於不同的文字需求。通過使用 Typography 和 TextTheme，您可以設置和覆寫這些文字樣式，以達到理想的設計效果。