Open1

ChipThemeがDark Modeで意図しない色になる時に

koji-1009koji-1009

FlutterでDark Mode時のChipの色が変わってしまっていたら、多分下の変更の影響です。

https://github.com/flutter/flutter/pull/74610

これはIssue 49984の修正対応で、Dark Mode時にChipが見にくい問題対応になります。
Flutter 2リリース前に対応しているような雰囲気ありますね。

https://github.com/flutter/flutter/issues/49984

「特定の色を決め打ちで入れる」というのは結構乱暴な対応だとは思うのですが、すでに入っているのでざっくり対応する方法をメモっておきます。


Themeの内部が下記のようになっているのを確認します。
今後Flutterのバージョンが上がることで変更がさらに入るかもしれないので、対応前に内部のコードを確認してください。

chipTheme ??= ChipThemeData.fromDefaults(
    secondaryColor: isDark ? Colors.tealAccent[200]! : primaryColor,
    brightness: colorScheme.brightness,
    labelStyle: textTheme.bodyText1!,
);

これは、ChipThemeData で次のように適用されます。

final TextStyle secondaryLabelStyle = labelStyle.copyWith(
    color: secondaryColor.withAlpha(textLabelAlpha),
);
labelStyle = labelStyle.copyWith(color: primaryColor.withAlpha(textLabelAlpha));

return ChipThemeData(
    backgroundColor: backgroundColor,
    deleteIconColor: deleteIconColor,
    disabledColor: disabledColor,
    selectedColor: selectedColor,
    secondarySelectedColor: secondarySelectedColor,
    padding: padding,
    labelStyle: labelStyle,
    secondaryLabelStyle: secondaryLabelStyle,
    brightness: brightness!,
);

このため final baseTheme = ThemeData.from(~~ のようにベースとなるThemeを一度作成し、copyWith で拡張しすることで変更前の状態にすることができます。
もちろん、個別の色を指定することも可能です。

final theme = baseTheme.copyWith(
    chipTheme: baseTheme.chipTheme.copyWith(
      secondaryLabelStyle: baseTheme.chipTheme.secondaryLabelStyle.copyWith(
        color: baseTheme.colorScheme.primary,
      ),
    ),
);