Flutter 鸿蒙跨端开发实战：集成三方库实现鸿蒙设备 TODO 清单应用

欢迎加入开源鸿蒙跨平台社区 https://openharmonycrossplatform.csdn.net本文专为鸿蒙入门开发者打造以可直接运行的 TODO 清单项目为实战案例手把手教你用 Flutter 跨端框架开发鸿蒙应用全程包含Flutter 核心配置、三方库集成、鸿蒙真机 / 模拟器调试零基础也能跟着实现完整功能。一、项目核心说明技术栈Flutter跨端框架 鸿蒙 OpenHarmony目标平台 实用三方库项目功能待办事项添加、标记完成、删除、本地持久化存储必用三方库shared_preferences本地数据持久化保存 TODO 数据重启不丢失fluttertoast轻量级提示弹窗操作反馈适配目标鸿蒙手机 / 平板 / 模拟器全兼容二、前置环境准备新手必看1. 基础环境安装安装 Flutter SDK≥3.19.0推荐稳定版安装 DevEco Studio鸿蒙官方 IDE用于运行模拟器 / 真机配置 Flutter 鸿蒙编译环境终端执行flutter config --enable-openharmony2. 验证环境终端输入flutter devices若显示鸿蒙设备 / 模拟器说明环境配置成功。三、创建 Flutter 鸿蒙项目步骤 1新建 Flutter 项目终端执行命令创建项目flutter create flutter_harmony_todocdflutter_harmony_todo步骤 2启用鸿蒙平台支持项目根目录执行flutter create--platformsopenharmony.执行后项目会自动生成openharmony适配目录完成鸿蒙基础配置。四、集成三方库核心步骤步骤 1修改pubspec.yaml配置打开项目根目录的pubspec.yaml文件在dependencies节点下添加三方库dependencies:flutter:sdk:flutter# 本地持久化三方库保存TODO数据shared_preferences:^2.5.2# 提示弹窗三方库操作反馈fluttertoast:^8.2.12步骤 2安装三方库终端执行命令拉取依赖flutter pub get等待依赖下载完成无报错即集成成功。五、完整项目代码实现带详细注释替换项目lib/main.dart文件的全部代码以下是可直接运行的完整代码importpackage:flutter/material.dart;// 导入本地持久化三方库importpackage:shared_preferences/shared_preferences.dart;// 导入提示弹窗三方库importpackage:fluttertoast/fluttertoast.dart;voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:Flutter鸿蒙TODO清单,// 关闭调试标签debugShowCheckedModeBanner:false,theme:ThemeData(primarySwatch:Colors.blue),home:constTodoPage(),);}}// TODO主页面classTodoPageextendsStatefulWidget{constTodoPage({super.key});overrideStateTodoPagecreateState()_TodoPageState();}class_TodoPageStateextendsStateTodoPage{// 输入框控制器获取输入的待办内容finalTextEditingController_todoControllerTextEditingController();// 待办数据列表存储所有TODO项ListString_todoList[];// 已完成项标记列表记录哪些TODO被勾选Listbool_isCompletedList[];overridevoidinitState(){super.initState();// 页面初始化时加载本地存储的TODO数据_loadTodoData();}// ------------------- 核心方法本地数据操作三方库使用 -------------------// 1. 从本地加载TODO数据shared_preferences三方库Futurevoid_loadTodoData()async{// 获取本地存储实例finalprefsawaitSharedPreferences.getInstance();// 读取本地存储的待办列表无数据则返回空数组setState((){_todoListprefs.getStringList(todoList)??[];_isCompletedListprefs.getStringList(isCompletedList)?.map((e)etrue).toList()??List.generate(_todoList.length,(index)false);});}// 2. 保存TODO数据到本地shared_preferences三方库Futurevoid_saveTodoData()async{finalprefsawaitSharedPreferences.getInstance();// 存储待办内容列表awaitprefs.setStringList(todoList,_todoList);// 存储完成状态列表awaitprefs.setStringList(isCompletedList,_isCompletedList.map((e)e.toString()).toList(),);}// ------------------- 业务功能方法 -------------------// 添加待办事项void_addTodo(){StringtodoContent_todoController.text.trim();// 校验输入内容不能为空if(todoContent.isEmpty){Fluttertoast.showToast(msg:请输入待办内容);return;}setState((){_todoList.add(todoContent);_isCompletedList.add(false);// 清空输入框_todoController.clear();});// 保存到本地_saveTodoData();Fluttertoast.showToast(msg:添加成功);}// 切换待办完成状态void_toggleComplete(int index){setState((){_isCompletedList[index]!_isCompletedList[index];});_saveTodoData();}// 删除待办事项void_deleteTodo(int index){setState((){_todoList.removeAt(index);_isCompletedList.removeAt(index);});_saveTodoData();Fluttertoast.showToast(msg:删除成功);}// ------------------- UI页面布局 -------------------overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(Flutter鸿蒙TODO清单),),body:Padding(padding:constEdgeInsets.all(16.0),child:Column(children:[// 输入框 添加按钮Row(children:[Expanded(child:TextField(controller:_todoController,decoration:constInputDecoration(hintText:请输入待办事项,border:OutlineInputBorder(),),),),constSizedBox(width:10),ElevatedButton(onPressed:_addTodo,child:constText(添加),),],),constSizedBox(height:20),// 待办列表展示区域Expanded(child:_todoList.isEmpty?constCenter(child:Text(暂无待办事项快去添加吧~)):ListView.builder(itemCount:_todoList.length,itemBuilder:(context,index){returnCard(margin:constEdgeInsets.only(bottom:8),child:ListTile(// 勾选框标记完成状态leading:Checkbox(value:_isCompletedList[index],onChanged:(value)_toggleComplete(index),),// 待办内容已完成则添加删除线title:Text(_todoList[index],style:TextStyle(decoration:_isCompletedList[index]?TextDecoration.lineThrough:TextDecoration.none,color:_isCompletedList[index]?Colors.grey:Colors.black,),),// 删除按钮trailing:IconButton(icon:constIcon(Icons.delete,color:Colors.red),onPressed:()_deleteTodo(index),),),);},),),],),),);}}六、Flutter 应用运行到鸿蒙设备步骤 1启动鸿蒙模拟器 / 连接真机打开 DevEco Studio → 设备管理器 → 启动鸿蒙手机模拟器或用数据线连接鸿蒙真机开启USB 调试步骤 2运行 Flutter 项目终端执行命令自动编译并安装到鸿蒙设备flutter run-dopenharmony等待编译完成鸿蒙设备上会自动打开 TODO 清单应用。七、功能测试验证效果添加待办输入内容点击添加弹出「添加成功」提示标记完成勾选复选框文字自动添加灰色删除线删除待办点击删除按钮移除对应事项持久化验证关闭应用重新打开数据不会丢失shared_preferences三方库生效鸿蒙适配界面完美适配鸿蒙系统风格无卡顿、无兼容问题八、核心知识点总结Flutter 鸿蒙适配通过flutter create \-\-platformsopenharmony快速启用鸿蒙平台支持三方库集成在pubspec.yaml声明依赖flutter pub get一键安装鸿蒙平台完美兼容核心三方库作用shared_preferences轻量级本地存储无需数据库即可保存数据fluttertoast极简提示弹窗提升用户体验跨端优势一套 Flutter 代码同时运行在 Android、iOS、鸿蒙设备无需重复开发九、常见问题解决三方库安装失败检查网络执行flutter clean后重新flutter pub get无法运行到鸿蒙设备确认开启 USB 调试执行flutter devices查看设备是否识别数据不持久化检查\_saveTodoData方法是否在增删改后调用结语本案例是Flutter 鸿蒙 三方库的入门级实战覆盖了跨端开发、三方库集成、鸿蒙适配三大核心技能。作为鸿蒙开发者掌握 Flutter 跨端技术后可快速实现一套代码多端运行大幅提升开发效率。后续可扩展更多三方库如网络请求、图片加载开发更复杂的鸿蒙跨端应用