Flutter 三方库 鸿蒙实战：shared_preferences 实现用户偏好存储完整教程

欢迎加入开源鸿蒙跨平台开发者社区：https://openharmonycrossplatform.csdn.net

---

前言

在 Flutter 跨平台开发中，三方库是提升开发效率的关键，而鸿蒙（OpenHarmony） 对 Flutter 提供了越来越完善的支持。
shared_preferences 是 Flutter 最常用的键值存储三方库，目前已完成鸿蒙化适配，可直接在鸿蒙设备上安全使用。

本文将带你从零开发一款简单实用的 Flutter 鸿蒙用户偏好设置 App，实现：

• 存储用户名
• 记录暗黑模式开关状态
• 应用重启后数据不丢失
• 全程基于鸿蒙化三方库，无任何未适配依赖

---

目录

1. 开发环境说明
2. 核心库与鸿蒙化状态
3. 创建 Flutter 鸿蒙项目
4. 集成鸿蒙化三方库
5. 编写本地存储工具类
6. 实现主页面与偏好设置
7. 在鸿蒙设备上运行与效果展示
8. 总结

---

一、开发环境

• DevEco Studio（支持 Flutter）
• Flutter SDK 配置鸿蒙支持
• 鸿蒙模拟器 / 真机
• Dart 基础语法

---

二、核心库与鸿蒙化状态

所有依赖均已完成鸿蒙适配，可放心调用：

库名	作用	鸿蒙化状态
shared_preferences	轻量级键值存储	✅ 已官方鸿蒙化
flutter/material.dart	UI 框架	✅ Flutter 鸿蒙内置支持

本文无任何未鸿蒙化库直接调用，符合规范。

---

三、创建 Flutter 鸿蒙项目（步骤详解）

步骤 1：打开 DevEco Studio → New Project

步骤 2：选择 Flutter Application 模板

步骤 3：配置项目信息

• Project name：flutter_user_settings
• 勾选 OpenHarmony
• 完成创建

!

---

四、集成鸿蒙化三方库

打开 pubspec.yaml，添加依赖：

dependencies:
  flutter:
    sdk: flutter

  # 已鸿蒙化的本地存储库
  shared_preferences: ^2.3.0

点击 Pub get 或执行：

flutter pub get

---

五、封装存储工具类（基于鸿蒙化 shared_preferences）

新建文件：
lib/utils/storage_service.dart

import 'package:shared_preferences/shared_preferences.dart';

class StorageService {
  static SharedPreferences? _prefs;

  static Future<void> init() async {
    _prefs = await SharedPreferences.getInstance();
  }

  // 保存用户名
  static Future<bool> setUserName(String name) async {
    return await _prefs?.setString('user_name', name) ?? false;
  }

  // 获取用户名
  static String? getUserName() {
    return _prefs?.getString('user_name');
  }

  // 保存暗黑模式状态
  static Future<bool> setDarkMode(bool isDark) async {
    return await _prefs?.setBool('is_dark_mode', isDark) ?? false;
  }

  // 获取暗黑模式状态
  static bool? getDarkMode() {
    return _prefs?.getBool('is_dark_mode');
  }

  // 清除数据
  static Future<bool> clear() async {
    return await _prefs?.clear() ?? false;
  }
}

---

六、主页面实现（完整可复制）

打开 lib/main.dart

import 'package:flutter/material.dart';
import 'utils/storage_service.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await StorageService.init();
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isDarkMode = false;

  @override
  void initState() {
    super.initState();
    _loadTheme();
  }

  void _loadTheme() {
    final dark = StorageService.getDarkMode();
    if (dark != null) {
      setState(() {
        isDarkMode = dark;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 鸿蒙偏好设置',
      theme: isDarkMode ? ThemeData.dark() : ThemeData.light(),
      home: const SettingPage(),
    );
  }
}

class SettingPage extends StatefulWidget {
  const SettingPage({super.key});

  @override
  State<SettingPage> createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  final TextEditingController _nameController = TextEditingController();
  String? userName;
  bool isDark = false;

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  Future<void> _loadData() async {
    final name = StorageService.getUserName();
    final dark = StorageService.getDarkMode();
    setState(() {
      userName = name;
      isDark = dark ?? false;
    });
    _nameController.text = name ?? '';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter 三方库 鸿蒙 - 用户设置'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              '用户名',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            TextField(
              controller: _nameController,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                hintText: '请输入用户名',
              ),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () async {
                await StorageService.setUserName(_nameController.text);
                await _loadData();
                if (mounted) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('已保存用户名')),
                  );
                }
              },
              child: const Text('保存用户名'),
            ),
            const SizedBox(height: 30),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text(
                  '暗黑模式',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                Switch(
                  value: isDark,
                  onChanged: (val) async {
                    setState(() {
                      isDark = val;
                    });
                    await StorageService.setDarkMode(val);
                    if (mounted) {
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text('主题已保存')),
                      );
                    }
                  },
                ),
              ],
            ),
            const SizedBox(height: 30),
            if (userName != null)
              Text(
                '当前保存的用户：$userName',
                style: const TextStyle(fontSize: 16, color: Colors.blue),
              ),
            const SizedBox(height: 20),
            Text(
              '当前模式：${isDark ? '暗黑' : '浅色'}',
              style: const TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

---

七、鸿蒙设备运行效果

运行步骤

1. 连接鸿蒙模拟器/真机
2. 点击运行按钮
3. 输入用户名并保存
4. 切换暗黑模式
5. 关闭重启 App → 数据依然存在

功能截图示意

---

八、总结

• 本文使用 Flutter + 鸿蒙化三方库 shared_preferences 完成了可落地的用户偏好存储功能
• 所有库均已鸿蒙化，无违规调用
• 代码轻量、可直接用于学习或项目基础模块
• 适合 Flutter 开发者快速入门鸿蒙跨平台开发

---