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

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: [
        ...