我想在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,
);
}
}
3条答案
按热度按时间a5g8bdjr1#
我想你已经在你自己的问题中得到了答案,你在代码示例中所做的是正确的,并且是法律的的。我所说的合法一词,我的意思是代码将工作并产生你所期望的结果,当然,除了部分
actionButtonColor
属性,因为该属性不是ThemeData
API的一部分。或者,如果您询问如何在主题数据中使用自定义的
actionButtonColor
属性,您不能。因为它是用于材质主题的预定义小部件。actionButton
应该只使用主题中的现有属性。但如果您真的需要这样做,您可以使用dart 2.7中的实验性扩展方法,例如,但是,当使用扩展方法时,您仍然无法为另一个
ThemeData
(如黑暗和光明主题)提供不同的配色方案。您可能需要研究this issue。希望能有所帮助。
pb3skfrl2#
你可以看看ThemeData的扩展,我发现它非常有用和简单。
在上面你可以创建自定义颜色;在小部件上的实现非常相似:
希望能有所帮助!
js4nwp543#
这将尝试解决您的问题,而不扩展ThemeData,而是使用AppTheme类本身提供主题相关的自定义颜色。
您将需要
1.一种静态吸气剂,其基于
1.在AppTheme类中存储当前主题状态的静态字段。
你可以使用一个布尔值作为静态字段,当你从应用程序的某个地方切换主题时,你可以改变它的值。
修改AppTheme类如下:
您还可以使用Provider或任何状态管理解决方案,轻松地动态更新主题和颜色。
使用示例: