面试题：Flutter中SharedPreferences与状态管理结合在用户设置场景的应用

关键步骤

引入依赖：在 pubspec.yaml 文件中添加 shared_preferences 和 provider 依赖。

dependencies:
  shared_preferences: ^2.0.15
  provider: ^6.0.5

创建状态管理类：使用 ChangeNotifier 来管理夜间模式状态。

import 'package:flutter/material.dart';

class ThemeModeProvider extends ChangeNotifier {
  bool _isDarkMode = false;

  bool get isDarkMode => _isDarkMode;

  void setDarkMode(bool value) {
    _isDarkMode = value;
    notifyListeners();
  }
}

持久化存储与读取：利用 SharedPreferences 来保存和读取夜间模式状态。

import 'package:shared_preferences/shared_preferences.dart';

class ThemeModeStorage {
  static const String _key = 'isDarkMode';

  static Future<bool> getIsDarkMode() async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getBool(_key)?? false;
  }

  static Future<void> setIsDarkMode(bool value) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setBool(_key, value);
  }
}

应用初始化时加载状态：在 main.dart 中初始化应用时读取存储的夜间模式状态。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final isDarkMode = await ThemeModeStorage.getIsDarkMode();
  runApp(MyApp(isDarkMode: isDarkMode));
}

class MyApp extends StatelessWidget {
  final bool isDarkMode;
  MyApp({required this.isDarkMode});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => ThemeModeProvider()..setDarkMode(isDarkMode),
      child: MaterialApp(
        theme: ThemeData.light(),
        darkTheme: ThemeData.dark(),
        themeMode: Provider.of<ThemeModeProvider>(context).isDarkMode
          ? ThemeMode.dark
           : ThemeMode.light,
        home: HomePage(),
      ),
    );
  }
}

在页面中切换模式：在页面中提供切换夜间模式的功能，并更新状态和持久化存储。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('夜间模式示例'),
      ),
      body: Center(
        child: Switch(
          value: Provider.of<ThemeModeProvider>(context).isDarkMode,
          onChanged: (value) async {
            Provider.of<ThemeModeProvider>(context, listen: false).setDarkMode(value);
            await ThemeModeStorage.setIsDarkMode(value);
          },
        ),
      ),
    );
  }
}

通过以上步骤，结合 SharedPreferences 和 Provider 实现了在Flutter应用中用户可设置夜间模式、持久化存储并在不同页面实时反映该状态的功能。

星途面试题库

面试题：Flutter中SharedPreferences与状态管理结合在用户设置场景的应用

知识考点

面试题答案

关键步骤