如何创建3个不同的颜色主题?光明，黑暗和习俗

Question

我想在浅色(白色)，深色(黑色)，自定义(我的原始外观-蓝色)之间进行更改。这可能吗?如果有，怎么做?

Answer 1

您可以在MaterialApp(theme:上提供ThemeData，这将反映小部件树。

void main() {
runApp(name());
}
enum AppTheme {
LightTheme(),
DarkTheme,
CustomTheme;
}
extension AppThemeData on AppTheme {
get data {
switch (this) {
case AppTheme.DarkTheme:
return ThemeData.dark();
case AppTheme.CustomTheme:
return ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSwatch().copyWith(
secondary: Colors.deepPurple,
),
);
case AppTheme.LightTheme:
default:
return ThemeData.light();
}
}
}
class name extends StatefulWidget {
const name({super.key});
@override
State<name> createState() => _nameState();
}
// You may use some sort of state-management solution like riverpod/bloc on project level
class _nameState extends State<name> {
AppTheme theme = AppTheme.LightTheme;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
theme: theme.data,
home: Scaffold(
appBar: AppBar(
title: Text("test"),
),
body: Column(
children: [
Text("test"),
for (final value in AppTheme.values)
ElevatedButton(
onPressed: () {
setState(() {
theme = value;
});
},
child: Text(value.name),
)
],
),
),
);
}
}