Flutter -在ThemeData中使用自定义颜色和主题

5jvtdoz2  于 2023-03-24  发布在  Flutter
关注(0)|答案(3)|浏览(164)

我想在ThemeData中使用自定义颜色和主题。我知道我可以在一个单独的文件中定义它们,然后导入该文件并使用它们。但我希望这些颜色在更改深色和浅色主题时起作用。目前我有单独的深色和浅色主题可切换。有办法在深色和浅色ThemeData中分别定义自定义颜色吗?
AppTheme.dart:

class AppTheme {
  AppTheme._();

  // Light Theme
  static final ThemeData lightTheme = ThemeData.light().copyWith(
    appBarTheme: AppBarTheme(
      color: Colors.grey[100],
      brightness: Brightness.light,
    ),
    scaffoldBackgroundColor: Colors.white,

    actionButtonColor: Colors.black, // Like this
  );

  // Dark Theme
  static final ThemeData darkTheme = ThemeData.dark().copyWith(
    appBarTheme: AppBarTheme(
      color: Colors.grey[850],
      brightness: Brightness.dark,
    ),
    scaffoldBackgroundColor: Colors.grey[900],

    actionButtonColor: Colors.red, // Like this
  );
}

App.dart

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Dashboard(),
      theme: AppTheme.lightTheme,
      darkTheme: AppTheme.darkTheme,
      debugShowCheckedModeBanner: false,
    );
  }
}
a5g8bdjr

a5g8bdjr1#

我想你已经在你自己的问题中得到了答案,你在代码示例中所做的是正确的,并且是法律的的。我所说的合法一词,我的意思是代码将工作并产生你所期望的结果,当然,除了部分actionButtonColor属性,因为该属性不是ThemeData API的一部分。
或者,如果您询问如何在主题数据中使用自定义的actionButtonColor属性,您不能。因为它是用于材质主题的预定义小部件。actionButton应该只使用主题中的现有属性。但如果您真的需要这样做,您可以使用dart 2.7中的实验性扩展方法,例如,

extension MyColorScheme on ColorScheme {
  Color get actionButtonColor => const Colors.red;
}

ActionButtonComponent(
    color: Theme.of(context).colorScheme.actionButtonColor, 
);

但是,当使用扩展方法时,您仍然无法为另一个ThemeData(如黑暗和光明主题)提供不同的配色方案。您可能需要研究this issue
希望能有所帮助。

pb3skfrl

pb3skfrl2#

你可以看看ThemeData的扩展,我发现它非常有用和简单。

extension LightThemeEx on ThemeData{
      Color get appSubTitleColor{
        return Color(0xFF5F6368);
      }
    }

在上面你可以创建自定义颜色;在小部件上的实现非常相似:

Theme.of(context).appSubTitleColor

希望能有所帮助!

js4nwp54

js4nwp543#

这将尝试解决您的问题,而不扩展ThemeData,而是使用AppTheme类本身提供主题相关的自定义颜色。
您将需要
1.一种静态吸气剂,其基于
1.在AppTheme类中存储当前主题状态的静态字段。
你可以使用一个布尔值作为静态字段,当你从应用程序的某个地方切换主题时,你可以改变它的值。
修改AppTheme类如下:

class AppTheme {
  AppTheme._();

  // Light Theme
  static final ThemeData lightTheme = ThemeData.light().copyWith(
    appBarTheme: AppBarTheme(
      color: Colors.grey[100],
      brightness: Brightness.light,
    ),
    scaffoldBackgroundColor: Colors.white);
  

  // Dark Theme
  static final ThemeData darkTheme = ThemeData.dark().copyWith(
    appBarTheme: AppBarTheme(
      color: Colors.grey[850],
      brightness: Brightness.dark,
    ),
    scaffoldBackgroundColor: Colors.grey[900]);
  
  
  // Custom colors
  static bool _isThemeDark = false;

  static set isThemeDark(bool value) {_isThemeDark = value;}

  static get actionButtonColor => _isThemeDark
    ? Colors.green 
    : Colors.red;
}

您还可以使用Provider或任何状态管理解决方案,轻松地动态更新主题和颜色。

class AppTheme with ChangeNotifier {
.
.
.
  set isThemeDark(bool value) {
  _isThemeDark = value; 
  notifyListner();
  }
}

使用示例:

void main(){
  AppTheme.isThemeDark=true;
  print(AppTheme.actionButtonColor);
}

相关问题