在浅色主题中更改图标颜色没有任何影响

Question

我正在编写一个 flutter 应用程序，我正在尝试为浅色和深色主题定义自己的主题。使用 android studio 编码并使用随附的常规 android 模拟器对其进行测试。

我注意到，当我在深色主题中更改图标颜色时，它起作用并看到所需颜色的图标，当模拟器设置为浅色主题时，图标的颜色没有改变。

这是我有效的深色主题代码：

import 'package:flutter/material.dart';

class DarkTheme {
  DarkTheme._();

  static const Color _iconColor = Colors.red;
  static const Color _darkPrimaryColor = Colors.black;
  static const Color _darkSecondaryColor = Colors.white;
  static const Color _darkOnPrimaryColor = Colors.white;

  static final ThemeData darkTheme = ThemeData(
    scaffoldBackgroundColor: _darkPrimaryColor,
    appBarTheme: const AppBarTheme(
        color: _darkPrimaryColor,
        iconTheme: IconThemeData(
          color: _darkOnPrimaryColor,
        )
    ),
    colorScheme: const ColorScheme.dark(
      primary: _darkPrimaryColor,
      secondary: _darkSecondaryColor,
      onPrimary: _darkOnPrimaryColor,
    ),
    iconTheme: const IconThemeData(
      color: _iconColor,
    ),
    textTheme: _darkTextTheme,
  );
  static const TextTheme _darkTextTheme = TextTheme(
    headline1: _darkScreenHeadingTextStyle,
    bodyText1: _darkScreenTaskNameStyle,
    bodyText2: _darkScreenTaskDurationStyle,
  );
  static const TextStyle _darkScreenHeadingTextStyle = TextStyle(
    fontSize: 48.0,
    color: _darkOnPrimaryColor,
  );
  static const TextStyle _darkScreenTaskNameStyle = TextStyle(
    fontSize: 20.0,
    color: _darkOnPrimaryColor,
  );
  static const TextStyle _darkScreenTaskDurationStyle = TextStyle(
    fontSize: 16.0,
    color: _darkOnPrimaryColor,
  );
}

如您所见，我将图标颜色设置为红色，当我运行应用程序处于深色模式时，图标为红色。

这是浅色主题的代码：

import 'package:flutter/material.dart';

class PinkTheme {
  PinkTheme._();

  static const Color _iconColor = Colors.yellow;
  static const Color _lightPrimaryColor = Colors.pinkAccent;
  static const Color _lightPrimaryVariantColor = Colors.blue;
  static const Color _lightSecondaryColor = Colors.green;
  static const Color _lightOnPrimaryColor = Colors.black;

  static final ThemeData lightTheme = ThemeData(
    scaffoldBackgroundColor: _lightPrimaryVariantColor,
    appBarTheme: const AppBarTheme(
       color: _lightPrimaryVariantColor,
      iconTheme: IconThemeData(
        color: _lightOnPrimaryColor,
      )
    ),
      colorScheme: const ColorScheme.light(
          primary: _lightPrimaryColor,
          primaryVariant: _lightPrimaryVariantColor,
          secondary: _lightSecondaryColor,
          onPrimary: _lightOnPrimaryColor,
      ),
      iconTheme: const IconThemeData(
        color: _iconColor,
  ),
      textTheme: _lightTextTheme,
  );
static const TextTheme _lightTextTheme = TextTheme(
  headline1: _lightScreenHeadingTextStyle,
  bodyText1: _lightScreenTaskNameStyle,
  bodyText2: _lightScreenTaskDurationStyle,
);
  static const TextStyle _lightScreenHeadingTextStyle = TextStyle(
    fontSize: 48.0,
    color: _lightOnPrimaryColor,
  );
  static const TextStyle _lightScreenTaskNameStyle = TextStyle(
    fontSize: 20.0,
    color: _lightOnPrimaryColor,
  );
  static const TextStyle _lightScreenTaskDurationStyle = TextStyle(
    fontSize: 16.0,
    color: _lightOnPrimaryColor,
  );
}

当我将模拟器设置为浅色主题时，我看到的不是黄色图标，而是灰色图标。

这是我在我的应用程序中使用主题的方式：

return MaterialApp(
          title: 'Test App',
          theme: PinkTheme.lightTheme,
          darkTheme: DarkTheme.darkTheme,
          themeMode: ThemeMode.system,
          ...

有什么解决办法吗？

谢谢

Answer 1

ListTile 小部件使用 ListTileTheme 作为其默认显示，因此您需要像这样为您的主要 ThemeData 设置它：

return MaterialApp(
  title: '...',
  theme: ThemeData(
    listTileTheme: const ListTileThemeData(
      iconColor: Colors.red,
    ),
    primarySwatch: ...,

或者您也可以在需要的地方直接设置它的主题(ListTileTheme):

return ListTileTheme(
  iconColor: Colors.red,
  child: Drawer(
    child: Column(
      children: [
        ...

Answer 2

ThemeData(
        listTileTheme: ListTileThemeData(
          iconColor: Colors.red,
        ),

一个继承的小部件，为该小部件的子树中的 ListTiles 定义颜色和样式参数。

此处指定的值用于未给出显式 non-null 值的 ListTile 属性。

在浅色主题中更改图标颜色没有任何影响

Changing icon color in light theme doesn't have any affect

dart

flutter

flutter-theme