如何在Flutter中设置黑暗模式主题

Question

我已经开发了一个这样做的程序，但在我更改值后它不会刷新。。。我在设置不同类中的值时也遇到了问题。

我的主要作品：

import 'package:flutter/material.dart';
import 'drawer.dart';
import 'settings.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({Key? key}) : super(key: key);
bool darkMode = false;
var mainTheme = ThemeData.light();
@override
Widget build(BuildContext context) {
if (MyApp().darkMode == true) {
mainTheme = ThemeData.dark();
}
return MaterialApp(
home: _MyApp(),
theme: mainTheme,
);
}
}
class _MyApp extends StatefulWidget {
const _MyApp({Key? key}) : super(key: key);
@override
State<_MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<_MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Jawsa"),
),
body: Row(
children: [
Expanded(
child: ListTile(
leading: Text(MyApp().darkMode.toString()),
))
],
),
drawer: MyDrawer(),
);
}
}

我的抽屉：

import 'package:flutter/material.dart';
import 'settings.dart';
void main() {
runApp(MyDrawer());
}
class MyDrawer extends StatelessWidget {
const MyDrawer({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
children: [
ListTile(
leading: Icon(Icons.settings),
title: Text("Settings"),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const Settings()),
);
}),
],
),
);
}
}

我的设置：

import 'package:flutter/material.dart';
import 'main.dart';
void main() {
runApp(Settings());
}
class Settings extends StatelessWidget {
const Settings({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Settings"),
),
body: const _Settings(),
);
}
}
class _Settings extends StatefulWidget {
const _Settings({Key? key}) : super(key: key);
@override
State<_Settings> createState() => _SettingsState();
}
class _SettingsState extends State<_Settings> {
@override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
child: ListView(
children: [
ListTile(
leading: Icon(Icons.dark_mode, size: 35),
title: Text("Dark Mode"),
subtitle: Text("Here you can change you're theme."),
trailing: Switch(
value: MyApp().darkMode,
activeTrackColor: Color.fromARGB(255, 89, 216, 255),
activeColor: Color.fromARGB(255, 78, 76, 175),
onChanged: (value) {
setState(() {
MyApp().darkMode = value;
});
},
),
),
],
),
),
],
);
}
}

我有一个变量MyApp().darkMode，我试图用Switch((将其从false更改为true。当变量在主文件中设置为static bool darkMode = false;时，代码就工作了。但直到我手动重新加载了一次Hot之后，模式才刷新。只有在那之后，主题才从光明变为黑暗，反之亦然。

有人知道我如何改变和解决这个问题吗？

附言：我尽量不使用任何其他扩展/依赖

Answer 1

通过使用提供程序包：https://pub.dev/packages/provider我对您的main.dart和setting.dart文件进行了更改，并且可以在模式之间切换。

main.dart:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'drawer.dart';
void main() {
runApp(
ChangeNotifierProvider(create: (context) => DarkMode(), child: MyApp()));
}
class MyApp extends StatelessWidget {
MyApp({Key? key}) : super(key: key);
var mainTheme = ThemeData.light();
var darkTheme = ThemeData.dark();

@override
Widget build(BuildContext context) {
final themeMode = Provider.of<DarkMode>(context);

return MaterialApp(
home: const _MyApp(),
theme: themeMode.darkMode ? darkTheme : mainTheme,
);
}
}
class _MyApp extends StatefulWidget {
const _MyApp({Key? key}) : super(key: key);
@override
State<_MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<_MyApp> {
@override
Widget build(BuildContext context) {
final themeMode = Provider.of<DarkMode>(context);
return Scaffold(
appBar: AppBar(
title: const Text("Jawsa"),
),
body: Row(
children: [
Expanded(
child: ListTile(
leading: Text(themeMode.darkMode.toString()),
))
],
),
drawer: const MyDrawer(),
);
}
}

class DarkMode with ChangeNotifier {
bool darkMode = true; ///by default it is true
///made a method which will execute while switching
changeMode() {
darkMode = !darkMode;
notifyListeners(); ///notify the value or update the widget value
}
}

设置.省道

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'main.dart';

class Settings extends StatelessWidget {
const Settings({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Settings"),
),
body: const _Settings(),
);
}
}
class _Settings extends StatefulWidget {
const _Settings({Key? key}) : super(key: key);
@override
State<_Settings> createState() => _SettingsState();
}
class _SettingsState extends State<_Settings> {
@override
Widget build(BuildContext context) {
final themeMode = Provider.of<DarkMode>(context);
return Column(
children: [
Expanded(
child: ListView(
children: [
ListTile(
leading: const Icon(Icons.dark_mode, size: 35),
title: const Text("Dark Mode"),
subtitle: const Text("Here you can change you're theme."),
trailing: Switch(
value: themeMode.darkMode,
activeTrackColor: const Color.fromARGB(255, 89, 216, 255),
activeColor: const Color.fromARGB(255, 78, 76, 175),
onChanged: (value) {
themeMode.changeMode();
},
),
),
],
),
),
],
);
}
}