如何根据用户在flutter中保存应用程序主题模式

Question

我在应用程序中添加了深色和浅色模式，但无法保存所选模式。我是新来的，所以这就是为什么我不明白该怎么做。这是我的深色和浅色模式按钮的代码，点击它会改变模式。

ListTile(
                  onTap: () {
                    MyApp.themeNotifier.value =
                        MyApp.themeNotifier.value == ThemeMode.light
                            ? ThemeMode.dark
                            : ThemeMode.light;
                  },
                  leading: Icon(MyApp.themeNotifier.value == ThemeMode.light
                      ? Icons.dark_mode
                      : Icons.light_mode),
                  title: MyApp.themeNotifier.value == ThemeMode.light
                      ? Text(
                          "Dark Mode",
                          style: TextStyle(
                            fontFamily: "Lato",
                          ),
                        )
                      : Text(
                          "Light Mode",
                          style: TextStyle(
                            fontFamily: "Lato",
                          ),
                        ),
                ),

我希望选择该模式。我知道可以使用共享首选项和其他一些本地数据库，但是谁能通过代码片段等告诉我可以实现哪些，谢谢

Answer 1

以下是如何使用 Riverpod 状态管理和共享首选项数据库来实现此目的。

所需进口：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:shared_preferences/shared_preferences.dart';

创建提供者 SharedPreferences：

// provider stores the instance SharedPreferences
final sharedPreferencesProvider = Provider<SharedPreferences>((_) {
  return throw UnimplementedError();
});

创建返回 AppTheme 的 ChangeNotifierProvider。

// provider to work with AppTheme
final appThemeProvider = ChangeNotifierProvider((ref) {
  return AppTheme(ref.watch(sharedPreferencesProvider));
});

class AppTheme extends ChangeNotifier {
  AppTheme(this._prefs);

  final SharedPreferences _prefs;

  /// Get the current value from SharedPreferences.
  bool getTheme() => _prefs.getBool('isDarkMode') ?? false;

  /// Store the current value in SharedPreferences.
  void setTheme(bool isDarkMode) {
    _prefs.setBool('isDarkMode', isDarkMode);

    notifyListeners();
  }
}

请注意，main 方法是异步的：

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // initialization SharedPreferences
  final SharedPreferences prefs = await SharedPreferences.getInstance();

  return runApp(ProviderScope(
    // override SharedPreferences provider with correct value
    overrides: [
      sharedPreferencesProvider.overrideWithValue(prefs),
    ],
    child: MyApp(),
  ));
}

下一个：

class MyApp extends ConsumerWidget {
  // using const we reduce unnecessary rebuild widget
  final Widget _myHomePage = const MyHomePage();

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    print(MyApp);

    // ref.watch allows you to monitor changes and rebuild our widget if necessary
    final bool isDarkMode = ref.watch(appThemeProvider).getTheme();

    return MaterialApp(
      title: 'Flutter demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: isDarkMode ? ThemeMode.dark : ThemeMode.light,
      home: _myHomePage,
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage();

  @override
  Widget build(BuildContext context) {
    print(MyHomePage);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Theme Riverpod Demo'),
      ),
      body: YourListTile(),
    );
  }
}

您的小部件：

class YourListTile extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    print(YourListTile);

    final bool isDarkMode = ref.watch(appThemeProvider).getTheme();

    return SwitchListTile(
      value: isDarkMode,
      onChanged: (_) {
        // the use of ref.read is necessary in callbacks
        ref.read(appThemeProvider.notifier).setTheme(!isDarkMode);
      },
      secondary: isDarkMode
          ? const Icon(Icons.dark_mode)
          : const Icon(Icons.light_mode),
      title: isDarkMode
          ? const Text(
              "Dark Mode",
              style: TextStyle(
                fontFamily: "Lato",
              ),
            )
          : const Text(
              "Light Mode",
              style: TextStyle(
                fontFamily: "Lato",
              ),
            ),
    );
  }
}

在此处了解有关软件包的更多信息：

• Riverpod 套餐
• 共享首选项包