Flutter集成三方库开发鸿蒙6.0（API20+）备忘录APP实战案例

(￣o￣) . z Z351

124人浏览 · 2026-04-08 09:41:07

(￣o￣) . z Z351 · 2026-04-08 09:41:07 发布

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

前言

作为鸿蒙开发者，入门Flutter跨端开发能实现一套代码运行在Android、iOS、鸿蒙6.0+等多平台，大幅降低开发成本。本文基于鸿蒙6.0（API20+）环境，通过【Flutter仿备忘录APP】实战案例，手把手教你集成常用三方库、完成鸿蒙平台适配，全程步骤详细、代码带注释，新手也能直接跟着做！

文章核心信息

开发环境：Flutter 3.22.0+、鸿蒙6.0（SDK API20+）、DevEco Studio 5.0+
核心知识点：Flutter基础项目搭建、三方库集成与使用、鸿蒙6.0平台适配
目标成果：可在鸿蒙6.0设备正常运行的Flutter备忘录APP

一、环境准备（Flutter+鸿蒙6.0配置）

1.1 基础环境安装

安装Flutter SDK（3.22.0及以上）：Flutter官网
安装DevEco Studio 5.0+，下载鸿蒙6.0（API20+）SDK
配置Flutter鸿蒙支持：

# 命令行启用Flutter鸿蒙平台支持
flutter config --enable-openharmony

验证环境：

flutter doctor

确保输出中OpenHarmony项显示正常，无报错。

1.2 鸿蒙6.0（API20+）关键配置要求

最低SDK版本：minSdkVersion 20
鸿蒙系统版本：HarmonyOS 6.0及以上
编译工具：DevEco Studio 5.0+

二、创建Flutter备忘录项目

2.1 命令行创建项目

# 创建Flutter项目（支持鸿蒙平台）
flutter create flutter_harmony_note
# 进入项目目录
cd flutter_harmony_note

2.2 鸿蒙平台配置修改

打开项目中 openharmony/app/build.gradle 文件，修改SDK版本为API20+：

openharmony {
    compileSdkVersion 20 // 鸿蒙API20
    defaultConfig {
        minSdkVersion 20 // 最低支持鸿蒙6.0（API20）
        targetSdkVersion 20
        versionCode 1
        versionName "1.0"
    }
}

三、Flutter三方库选型（鸿蒙6.0兼容）

本次案例集成3个高频实用三方库，均兼容鸿蒙6.0（API20+）：

三方库名称	版本	作用
shared_preferences	^2.2.0	本地数据持久化（保存备忘录）
fluttertoast	^8.2.2	鸿蒙平台消息提示
intl	^0.19.0	时间格式化（备忘录创建时间）

3.1 集成三方库

打开项目根目录 pubspec.yaml 文件，添加依赖：

dependencies:
  flutter:
    sdk: flutter
  # 本地存储三方库（鸿蒙兼容）
  shared_preferences: ^2.2.0
  # 消息提示三方库（鸿蒙兼容）
  fluttertoast: ^8.2.2
  # 时间格式化三方库
  intl: ^0.19.0

执行命令安装依赖：

flutter pub get

四、核心功能代码实现

我们将实现备忘录列表展示、添加笔记、删除笔记、本地持久化核心功能，代码全注释讲解。

4.1 主文件lib/main.dart完整代码

import 'package:flutter/material.dart';
// 本地存储三方库：鸿蒙平台数据持久化
import 'package:shared_preferences/shared_preferences.dart';
// 消息提示三方库：鸿蒙设备弹窗提示
import 'package:fluttertoast/fluttertoast.dart';
// 时间格式化三方库
import 'package:intl/intl.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter鸿蒙备忘录',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const NotePage(),
      // 关闭调试标签
      debugShowCheckedModeBanner: false,
    );
  }
}

// 备忘录主页面
class NotePage extends StatefulWidget {
  const NotePage({super.key});

  @override
  State<NotePage> createState() => _NotePageState();
}

class _NotePageState extends State<NotePage> {
  // 输入框控制器：获取用户输入的笔记内容
  final TextEditingController _noteController = TextEditingController();
  // 备忘录数据列表：存储所有笔记
  List<String> _noteList = [];
  // 本地存储对象：三方库shared_preferences实例
  late SharedPreferences _prefs;

  @override
  void initState() {
    super.initState();
    // 页面初始化时加载本地存储的笔记
    _initPrefs();
  }

  // 初始化本地存储（鸿蒙平台兼容）
  Future<void> _initPrefs() async {
    _prefs = await SharedPreferences.getInstance();
    // 加载本地保存的笔记数据
    _loadNotes();
  }

  // 加载本地笔记数据
  void _loadNotes() {
    setState(() {
      // 从shared_preferences中读取笔记列表，无数据则返回空数组
      _noteList = _prefs.getStringList('notes') ?? [];
    });
  }

  // 保存笔记到本地（三方库核心用法）
  Future<void> _saveNote() async {
    String note = _noteController.text.trim();
    if (note.isEmpty) {
      // 鸿蒙平台提示：输入不能为空
      Fluttertoast.showToast(msg: "请输入笔记内容");
      return;
    }

    // 获取当前时间（格式化）
    String time = DateFormat('yyyy-MM-dd HH:mm').format(DateTime.now());
    String newNote = "$time | $note";

    setState(() {
      _noteList.add(newNote);
      // 清空输入框
      _noteController.clear();
    });

    // 保存到本地存储
    await _prefs.setStringList('notes', _noteList);
    // 鸿蒙平台提示：保存成功
    Fluttertoast.showToast(msg: "笔记保存成功");
  }

  // 删除笔记
  Future<void> _deleteNote(int index) async {
    setState(() {
      _noteList.removeAt(index);
    });
    // 更新本地存储
    await _prefs.setStringList('notes', _noteList);
    Fluttertoast.showToast(msg: "笔记删除成功");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter+鸿蒙 备忘录')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 笔记输入框
            TextField(
              controller: _noteController,
              decoration: const InputDecoration(
                hintText: "请输入笔记内容",
                border: OutlineInputBorder(),
              ),
              maxLines: 3,
            ),
            const SizedBox(height: 10),
            // 保存按钮
            ElevatedButton(
              onPressed: _saveNote,
              child: const Text("保存笔记"),
            ),
            const SizedBox(height: 20),
            // 笔记列表标题
            const Text(
              "备忘录列表",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const Divider(),
            // 笔记列表展示
            Expanded(
              child: _noteList.isEmpty
                  ? const Center(child: Text("暂无笔记，快去添加吧~"))
                  : ListView.builder(
                      itemCount: _noteList.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text(_noteList[index]),
                          trailing: IconButton(
                            icon: const Icon(Icons.delete, color: Colors.red),
                            onPressed: () => _deleteNote(index),
                          ),
                        );
                      },
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

4.2 代码核心解释

shared_preferences：鸿蒙平台轻量级本地存储，用于永久保存备忘录，重启APP数据不丢失。
fluttertoast：适配鸿蒙系统的消息提示，替代原生弹窗，体验更贴合鸿蒙设备。
intl：统一格式化时间，保证多平台（含鸿蒙）时间显示一致。

五、鸿蒙6.0（API20+）专属适配

5.1 鸿蒙权限配置

打开 openharmony/app/src/main/module.json5 文件，添加本地存储权限（API20+规范）：

{
  "module": {
    "abilities": [],
    "requestPermissions": [
      {
        "name": "ohos.permission.WRITE_LOCAL_STORAGE",
        "reason": "用于保存备忘录数据"
      },
      {
        "name": "ohos.permission.READ_LOCAL_STORAGE",
        "reason": "用于读取备忘录数据"
      }
    ]
  }
}

5.2 鸿蒙屏幕适配

Flutter默认适配鸿蒙全面屏，无需额外代码，若需适配鸿蒙折叠屏，可添加如下代码：

在 lib/main.dart 的 MaterialApp 中添加：

builder: (context, child) {
  // 鸿蒙折叠屏/全面屏适配
  return MediaQuery(
    data: MediaQuery.of(context).copyWith(
      // 忽略鸿蒙系统底部导航栏遮挡
      viewPadding: EdgeInsets.zero,
    ),
    child: child!,
  );
},

六、编译运行（鸿蒙6.0设备/模拟器）

6.1 运行方式1：命令行运行

连接鸿蒙6.0设备（开启开发者模式+USB调试）
执行命令：

# 查看已连接的鸿蒙设备
flutter devices
# 运行项目到鸿蒙设备
flutter run -d 设备ID

6.2 运行方式2：DevEco Studio运行

用DevEco Studio打开项目
选择鸿蒙6.0模拟器/真机
点击「运行」按钮，等待编译完成

6.3 效果验证

✅ 成功在鸿蒙6.0（API20+）设备显示APP界面

✅ 输入笔记点击保存，数据持久化存储

✅ 支持删除笔记，鸿蒙设备弹出提示

✅ 三方库全部正常运行，无兼容问题

七、鸿蒙+Flutter常见问题解决方案

问题1：三方库在鸿蒙6.0上无法使用

解决方案：升级三方库到最新稳定版，确保支持API20+，执行：

flutter pub upgrade

问题2：鸿蒙设备运行白屏

解决方案：检查 build.gradle 中 minSdkVersion 是否为20，确认鸿蒙系统版本≥6.0。

问题3：本地存储无权限

解决方案：严格按照API20+规范配置 module.json5 权限，重启APP授权。

总结

本文通过Flutter备忘录APP实战，完成了Flutter+三方库+鸿蒙6.0（API20+）全流程开发：

掌握Flutter项目鸿蒙6.0环境配置
学会集成并使用shared_preferences、fluttertoast、intl三个核心三方库
搞定鸿蒙API20+权限、屏幕适配
实现一套代码运行在鸿蒙6.0+设备的跨端应用

作为鸿蒙开发者，Flutter跨端开发能快速拓展技术栈，后续可集成更多三方库（网络请求、图片加载等），开发更复杂的鸿蒙跨平台应用！

MD文档使用说明

直接复制本文内容，保存为 flutter_harmony_lib_tutorial.md 文件
用Markdown编辑器（VSCode、Typora）打开即可查看
代码可直接复制运行，适配鸿蒙6.0（API20+）

EazyDevelop社区

一站式 AI 云服务平台

更多推荐

基于Flutter实现音视频聊天应用——技术指南

EazyDevelop社区

告别手动配环境！OpenClaw Windows 1分钟一键部署完整指南

EazyDevelop社区

零代码部署 OpenClaw：Win11 一键安装与使用教程

EazyDevelop社区

所有评论(0)

查看更多评论

(￣o￣) . z Z351

@2502_94321158

已为社区贡献1条内容