面试题：Flutter中SharedPreferences提升用户体验的基本实现

Question

在Flutter应用中，简述如何使用SharedPreferences存储用户的个性化设置（如主题颜色）来提升用户体验，并给出关键代码示例。

Answer 1

1. 引入依赖

在 pubspec.yaml 文件中添加 shared_preferences 依赖：

dependencies:
  shared_preferences: ^2.0.15

然后运行 flutter pub get 下载依赖。

2. 存储主题颜色

import 'package:shared_preferences/shared_preferences.dart';

Future<void> saveThemeColor(String color) async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('theme_color', color);
}

3. 获取主题颜色

Future<String?> getThemeColor() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getString('theme_color');
}

4. 在应用中使用

在你的 main.dart 或相关主题设置页面中：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final color = await getThemeColor();
  runApp(MyApp(initialColor: color));
}

class MyApp extends StatelessWidget {
  final String? initialColor;
  MyApp({this.initialColor});

  @override
  Widget build(BuildContext context) {
    final themeColor = initialColor?? 'default_color';
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: getColorFromHex(themeColor),
      ),
      home: HomePage(),
    );
  }

  MaterialColor getColorFromHex(String hexColor) {
    // 实现将十六进制颜色转换为MaterialColor的逻辑
    // 例如：
    final hexCode = hexColor.replaceAll('#', '');
    final int code = int.parse(hexCode, radix: 16);
    final int red = (code & 0xFF0000) >> 16;
    final int green = (code & 0x00FF00) >> 8;
    final int blue = code & 0x0000FF;
    return MaterialColor(
      code,
      <int, Color>{
        50: Color.fromRGBO(red, green, blue, .1),
        100: Color.fromRGBO(red, green, blue, .2),
        200: Color.fromRGBO(red, green, blue, .3),
        300: Color.fromRGBO(red, green, blue, .4),
        400: Color.fromRGBO(red, green, blue, .5),
        500: Color.fromRGBO(red, green, blue, .6),
        600: Color.fromRGBO(red, green, blue, .7),
        700: Color.fromRGBO(red, green, blue, .8),
        800: Color.fromRGBO(red, green, blue, .9),
        900: Color.fromRGBO(red, green, blue, 1),
      },
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Color Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                await saveThemeColor('#FF0000'); // 示例颜色
                setState(() {});
              },
              child: Text('Set Red Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

通过上述步骤，就可以在Flutter应用中使用 SharedPreferences 存储和读取用户的主题颜色设置，从而提升用户体验。