概述

#

SwitchSwitchListTileCheckboxCheckboxListTileRadioRadioListTile 等 Material 组件现在使用 ColorScheme.secondary 颜色作为其可切换组件的颜色。ThemeData.toggleableActiveColor 已弃用,并将最终被移除。

背景

#

将依赖于 ThemeData.toggleableActiveColor 的组件迁移到 ColorScheme.secondary 导致 toggleableActiveColor 属性变得不必要。根据 Flutter 的弃用策略,该属性最终将被移除。

变更说明

#

之前使用 ThemeData.toggleableActiveColor 颜色来表示活动/选中状态的组件,现在使用 ColorScheme.secondary

迁移指南

#

可切换组件的活动/选中颜色通常可以通过 3 种方式进行自定义

  1. 使用 ThemeData 的 ColorScheme.secondary
  2. 使用组件主题 SwitchThemeDataListTileThemeDataCheckboxThemeDataRadioThemeData
  3. 通过自定义 widget 的颜色属性。

迁移前的代码

dart
MaterialApp(
  theme: ThemeData(toggleableActiveColor: myColor),
  // ...
);

迁移后的代码

dart
final ThemeData theme = ThemeData();
MaterialApp(
  theme: theme.copyWith(
    switchTheme: SwitchThemeData(
      thumbColor: MaterialStateProperty.resolveWith<Color?>(
          (Set<MaterialState> states) {
        if (states.contains(MaterialState.disabled)) {
          return null;
        }
        if (states.contains(MaterialState.selected)) {
          return myColor;
        }
        return null;
      }),
      trackColor: MaterialStateProperty.resolveWith<Color?>(
          (Set<MaterialState> states) {
        if (states.contains(MaterialState.disabled)) {
          return null;
        }
        if (states.contains(MaterialState.selected)) {
          return myColor;
        }
        return null;
      }),
    ),
    radioTheme: RadioThemeData(
      fillColor: MaterialStateProperty.resolveWith<Color?>(
          (Set<MaterialState> states) {
        if (states.contains(MaterialState.disabled)) {
          return null;
        }
        if (states.contains(MaterialState.selected)) {
          return myColor;
        }
        return null;
      }),
    ),
    checkboxTheme: CheckboxThemeData(
      fillColor: MaterialStateProperty.resolveWith<Color?>(
          (Set<MaterialState> states) {
        if (states.contains(MaterialState.disabled)) {
          return null;
        }
        if (states.contains(MaterialState.selected)) {
          return myColor;
        }
        return null;
      }),
    ),
  ),
  //...
)

时间线

#

稳定版发布于: 3.7

参考资料

#

API 文档

相关问题

相关 PR