[英]Flutter: How I Can Change Theme Using Switch in Flutter - I have Implemented this Light and Dark Theme Using Provider, But can not change with switch
I have used the provider for changing themes, this is the code for light and dark theme.我已经使用提供程序更改主题,这是浅色和深色主题的代码。 The main purpose of my question is to change the theme with a switch, not with a button.
我的问题的主要目的是通过开关而不是按钮来更改主题。 The theme can be changed with a button correctly using "int mode".
可以使用“int 模式”通过按钮正确更改主题。 But when I use "bool mode" because of a switch.
但是当我因为开关而使用“布尔模式”时。 The switch needs a value of true or false.
开关需要一个真值或假值。
How to implement this switch for changing the light and dark theme?如何实现此开关以更改明暗主题? I need a switch, not a button.
我需要一个开关,而不是一个按钮。
import 'package:flutter/material.dart';
class AppStyleModeNotifier extends ChangeNotifier {
bool mode = true; //0 for light and 1 for dark
Color primaryBackgroundColor = Colors.white;
Color appBarBackgroundColor = Colors.cyan[200];
Color boxColor = Colors.blue[50];
Color boxTextColor = Colors.indigo;
Color primaryTextColor = Colors.white;
Color dashboardColor = Colors.cyan;
Color dashboardTextColor = Colors.red[600];
Color dashboardIconColor = Colors.yellow[200];
//Color typeMessageBoxColor = Colors.grey[200];
switchMode() {
if (mode == true) {
//if it is light mode currently switch to dark
primaryBackgroundColor = Colors.grey[900];
appBarBackgroundColor = Colors.grey[800];
// boxColor = Colors.grey[600];
boxColor = Colors.black;
boxTextColor = Colors.grey[100];
primaryTextColor = Colors.black;
dashboardColor = Colors.grey[900];
dashboardTextColor = Colors.grey[400];
dashboardIconColor = Colors.white;
//typeMessageBoxColor = Colors.grey[800];
mode = false;
} else {
//if it is dark mode currently switch to light
primaryBackgroundColor = Colors.white;
appBarBackgroundColor = Colors.cyan[200];
boxColor = Colors.tealAccent;
boxTextColor = Colors.indigo;
primaryTextColor = Colors.white;
dashboardColor = Colors.cyan;
dashboardTextColor = Colors.red[600];
dashboardIconColor = Colors.yellow[200];
//typeMessageBoxColor = Colors.grey[200];
mode = true;
}
notifyListeners();
}
}
Following is the Switch for changing the light and dark theme.以下是更改明暗主题的开关。 This Switch is not working correctly, Is there any mistake in the code.
此开关工作不正常,代码中是否有任何错误。 Instead of a switch using a button, it works fine.
而不是使用按钮的开关,它工作正常。
import 'package:provider/provider.dart';
import '../FreelanceTheme/AppStyleModeNotifier.dart';
class HomePage extends StatelessWidget with NavigationStates {
const HomePage({Key key, this.onMenuTap}) : super(key: key);
@override
Widget build(BuildContext context) {
final appStyleMode = Provider.of<AppStyleModeNotifier>(context);
return MaterialApp(
home: Scaffold(
backgroundColor: Color(0xffE5E5E5),
appBar: AppBar(
elevation: 0,
backgroundColor: appStyleMode.appBarBackgroundColor,
actions: <Widget>[
Switch(
value: appStyleMode.mode,
onChanged: appStyleMode.switchMode(),
),
Change your code to this, it'll be work.将您的代码更改为此,它将起作用。
Switch(
value: appStyleMode.mode,
onChanged: (value)=> appStyleMode.switchMode(),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.