flutter - 如何在 Flutter 中切换到暗/亮模式按钮？

Question

我想制作一个可以更改我的应用程序主题的按钮，该按钮将位于设置页面中。不幸的是，我还没有找到解决方案，我在互联网上只能找到动态切换主题的方法。

Answer 1

上面的答案是正确的。下面是一些代码，可帮助您直观地了解解决方案。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(
    MultiProvider(
      providers: [
      // Used MultiProvider incase you have other providers
        ChangeNotifierProvider<ThemeDataProvider>(
          create: (_) => ThemeDataProvider(),
        ),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ThemeDataProvider themeDataProvider = Provider.of(context);

    // Pull the theme data from the provider and make a few modification
    // The modifications are for illustration only.  Not required.
    final ThemeData currentTheme = themeDataProvider.themeData.copyWith(
      scaffoldBackgroundColor: themeDataProvider.isDarkTheme ? Colors.yellow[700] : Colors.yellow[300],
      appBarTheme: themeDataProvider.themeData.appBarTheme,
      cardTheme: themeDataProvider.themeData.cardTheme,
    );
    return MaterialApp(
      color: Colors.yellow[100],
      title: 'MyApp',
      theme: currentTheme, //set your theme
      initialRoute: setupRoute,
      onGenerateRoute: Router.generateRoute,
    );
  }
}


class ThemeDataProvider with ChangeNotifier {
  bool _useDarkTheme;
  SharedPreferences _prefs;
  ThemeDataProvider() {
    _useDarkTheme = false;
    _loadPrefs();
  }

  ThemeData get themeData => _useDarkTheme ? myThemeDark : myThemeLight; //MyTheme... is defined by you

  bool get isDarkTheme => _useDarkTheme;

  void toggleTheme() {
    _useDarkTheme = !_useDarkTheme;
    _savePrefs();
    notifyListeners();
  }

//The reset is just incase you want to save the selected theme for the next time your app is run.
  _initPrefs() async {
    if (_prefs == null) {
      _prefs = await SharedPreferences.getInstance();
    }
  }

  _loadPrefs() async {
    await _initPrefs();
    _useDarkTheme = _prefs.getBool("useDarkMode") ?? true;
    notifyListeners();
  }

  _savePrefs() async {
    await _initPrefs();
    await _prefs.setBool("useDarkMode", _useDarkTheme);
  }
}

使用几次后，它真的很简单。

祝你好运!