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

欢迎加入开源鸿蒙跨平台社区 https://openharmonycrossplatform.csdn.net前言作为鸿蒙开发者入门Flutter跨端开发能实现一套代码运行在Android、iOS、鸿蒙6.0等多平台大幅降低开发成本。本文基于鸿蒙6.0API20环境通过【Flutter仿备忘录APP】实战案例手把手教你集成常用三方库、完成鸿蒙平台适配全程步骤详细、代码带注释新手也能直接跟着做文章核心信息开发环境Flutter 3.22.0、鸿蒙6.0SDK API20、DevEco Studio 5.0核心知识点Flutter基础项目搭建、三方库集成与使用、鸿蒙6.0平台适配目标成果可在鸿蒙6.0设备正常运行的Flutter备忘录APP目录环境准备Flutter鸿蒙6.0配置项目创建Flutter备忘录APP初始化三方库选型与集成鸿蒙兼容版核心功能代码实现带详细注释鸿蒙6.0API20专属适配项目编译运行与效果验证常见问题解决方案一、环境准备Flutter鸿蒙6.0配置1.1 基础环境安装安装Flutter SDK3.22.0及以上Flutter官网安装DevEco Studio 5.0下载鸿蒙6.0API20SDK配置Flutter鸿蒙支持# 命令行启用Flutter鸿蒙平台支持flutter config --enable-openharmony验证环境flutter doctor确保输出中OpenHarmony项显示正常无报错。1.2 鸿蒙6.0API20关键配置要求最低SDK版本minSdkVersion 20鸿蒙系统版本HarmonyOS 6.0及以上编译工具DevEco Studio 5.0二、创建Flutter备忘录项目2.1 命令行创建项目# 创建Flutter项目支持鸿蒙平台flutter create flutter_harmony_note# 进入项目目录cdflutter_harmony_note2.2 鸿蒙平台配置修改打开项目中 openharmony/app/build.gradle 文件修改SDK版本为API20openharmony { compileSdkVersion 20 // 鸿蒙API20 defaultConfig { minSdkVersion 20 // 最低支持鸿蒙6.0API20 targetSdkVersion 20 versionCode 1 versionName 1.0 } }三、Flutter三方库选型鸿蒙6.0兼容本次案例集成3个高频实用三方库均兼容鸿蒙6.0API20三方库名称版本作用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完整代码importpackage:flutter/material.dart;// 本地存储三方库鸿蒙平台数据持久化importpackage:shared_preferences/shared_preferences.dart;// 消息提示三方库鸿蒙设备弹窗提示importpackage:fluttertoast/fluttertoast.dart;// 时间格式化三方库importpackage:intl/intl.dart;voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:Flutter鸿蒙备忘录,theme:ThemeData(primarySwatch:Colors.blue),home:constNotePage(),// 关闭调试标签debugShowCheckedModeBanner:false,);}}// 备忘录主页面classNotePageextendsStatefulWidget{constNotePage({super.key});overrideStateNotePagecreateState()_NotePageState();}class_NotePageStateextendsStateNotePage{// 输入框控制器获取用户输入的笔记内容finalTextEditingController_noteControllerTextEditingController();// 备忘录数据列表存储所有笔记ListString_noteList[];// 本地存储对象三方库shared_preferences实例lateSharedPreferences_prefs;overridevoidinitState(){super.initState();// 页面初始化时加载本地存储的笔记_initPrefs();}// 初始化本地存储鸿蒙平台兼容Futurevoid_initPrefs()async{_prefsawaitSharedPreferences.getInstance();// 加载本地保存的笔记数据_loadNotes();}// 加载本地笔记数据void_loadNotes(){setState((){// 从shared_preferences中读取笔记列表无数据则返回空数组_noteList_prefs.getStringList(notes)??[];});}// 保存笔记到本地三方库核心用法Futurevoid_saveNote()async{Stringnote_noteController.text.trim();if(note.isEmpty){// 鸿蒙平台提示输入不能为空Fluttertoast.showToast(msg:请输入笔记内容);return;}// 获取当前时间格式化StringtimeDateFormat(yyyy-MM-dd HH:mm).format(DateTime.now());StringnewNote$time|$note;setState((){_noteList.add(newNote);// 清空输入框_noteController.clear();});// 保存到本地存储await_prefs.setStringList(notes,_noteList);// 鸿蒙平台提示保存成功Fluttertoast.showToast(msg:笔记保存成功);}// 删除笔记Futurevoid_deleteNote(int index)async{setState((){_noteList.removeAt(index);});// 更新本地存储await_prefs.setStringList(notes,_noteList);Fluttertoast.showToast(msg:笔记删除成功);}overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(Flutter鸿蒙 备忘录)),body:Padding(padding:constEdgeInsets.all(16.0),child:Column(children:[// 笔记输入框TextField(controller:_noteController,decoration:constInputDecoration(hintText:请输入笔记内容,border:OutlineInputBorder(),),maxLines:3,),constSizedBox(height:10),// 保存按钮ElevatedButton(onPressed:_saveNote,child:constText(保存笔记),),constSizedBox(height:20),// 笔记列表标题constText(备忘录列表,style:TextStyle(fontSize:18,fontWeight:FontWeight.bold),),constDivider(),// 笔记列表展示Expanded(child:_noteList.isEmpty?constCenter(child:Text(暂无笔记快去添加吧~)):ListView.builder(itemCount:_noteList.length,itemBuilder:(context,index){returnListTile(title:Text(_noteList[index]),trailing:IconButton(icon:constIcon(Icons.delete,color:Colors.red),onPressed:()_deleteNote(index),),);},),),],),),);}}4.2 代码核心解释shared_preferences鸿蒙平台轻量级本地存储用于永久保存备忘录重启APP数据不丢失。fluttertoast适配鸿蒙系统的消息提示替代原生弹窗体验更贴合鸿蒙设备。intl统一格式化时间保证多平台含鸿蒙时间显示一致。五、鸿蒙6.0API20专属适配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){// 鸿蒙折叠屏/全面屏适配returnMediaQuery(data:MediaQuery.of(context).copyWith(// 忽略鸿蒙系统底部导航栏遮挡viewPadding:EdgeInsets.zero,),child:child!,);},六、编译运行鸿蒙6.0设备/模拟器6.1 运行方式1命令行运行连接鸿蒙6.0设备开启开发者模式USB调试执行命令# 查看已连接的鸿蒙设备flutter devices# 运行项目到鸿蒙设备flutter run-d设备ID6.2 运行方式2DevEco Studio运行用DevEco Studio打开项目选择鸿蒙6.0模拟器/真机点击「运行」按钮等待编译完成6.3 效果验证✅ 成功在鸿蒙6.0API20设备显示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.0API20全流程开发掌握Flutter项目鸿蒙6.0环境配置学会集成并使用shared_preferences、fluttertoast、intl三个核心三方库搞定鸿蒙API20权限、屏幕适配实现一套代码运行在鸿蒙6.0设备的跨端应用作为鸿蒙开发者Flutter跨端开发能快速拓展技术栈后续可集成更多三方库网络请求、图片加载等开发更复杂的鸿蒙跨平台应用MD文档使用说明直接复制本文内容保存为 flutter_harmony_lib_tutorial.md 文件用Markdown编辑器VSCode、Typora打开即可查看代码可直接复制运行适配鸿蒙6.0API20