如何在 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);
  }
}

一旦你使用它幾次，它真的很直接。

祝你好運！

Answer 2

如果您有單頁，則非常容易使用 Setstate 更改顏色，但如果您想更改多個小部件/頁面，我建議學習 Provider-> ChangeNotifierProvider。 因為每個頁面都需要監聽當前選擇的顏色，並在顏色發生變化時重建小部件。

Answer 3

install get package getx然后你可以像這樣切換你的心情：

Get.isDarkMode? Get.changeTheme(ThemeData.light()):Get.changeTheme(ThemeData.dark());