Flutter 中的 Material 3 Token 更新

Material Design Token 在淺色模式下更新了 4 種顏色角色的對映，以使其更具視覺吸引力，同時保持可訪問的對比度。測試表明，此更改在 Flutter 中是非破壞性的，但某些客戶可能會注意到此小改動。此次更新影響了以下顏色屬性：

• onPrimaryContainer (Primary10 到 Primary30)
• onSecondaryContainer (Secondary10 到 Secondary30)
• onTertiaryContainer (Tertiary10 到 Tertiary30)
• onErrorContainer (Error10 到 Error30)

那些以這些角色作為預設值的 Widget 可能會看起來不同。

此外，Material 3 Token 將 Chip Widget 的邊框顏色從 ColorScheme.outline 更新為 ColorScheme.outlineVariant，以改善 Chip 和 Button 之間的視覺層次結構。那些使用 Chip 邊框 Token 的 Chip (Chip, ActionChip, ChoiceChip, FilterChip, and InputChip) 可能會看起來不同。

顏色角色對映的差異很小。使用 ColorScheme.copyWith 可以恢復到原始的預設顏色。

遷移前的程式碼

final ColorScheme colors = ThemeData().colorScheme;

遷移後的程式碼

final ColorScheme colors = ThemeData().colorScheme.copyWith(
  onPrimaryContainer: const Color(0xFF21005D),
  onSecondaryContainer: const Color(0xFF1D192B),
  onTertiaryContainer: const Color(0xFF31111D),
  onErrorContainer: const Color(0xFF410E0B),
);

應用 Token 更新後，M3 Chip 的預設邊框顏色看起來更淺。以 ActionChip 為例：

遷移前的程式碼

final chip = ActionChip(
  label: const Text('action chip'),
  onPressed: () {},
);

遷移後的程式碼

final chip = ChipTheme(
  data: ChipThemeData(
    side: BorderSide(
      color: Theme.of(context).colorScheme.outline
    ),
  ),
  child: ActionChip(
    label: const Text('action chip'), 
    onPressed: () {}
  )
);

已合併到版本：3.26.0-0.0.pre
穩定版釋出：3.27

API 文件

• ColorScheme
• ThemeData
• Chip

相關 PR

• 將 Token 更新到 v5.0.0
• 將 Token 更新到 v6.1.0