Flutter 跨端实战教程：鸿蒙开发者入门 + 三方库集成实践案例

Flutter 跨端实战教程鸿蒙开发者入门 三方库集成实践案例前言本文面向鸿蒙开发者新手从零开始学习Flutter 跨端开发。内容包含Flutter 基础使用、常用三方库集成、鸿蒙设备运行三大核心知识点。通过一个完整可运行的 TODO 清单案例一步一步带你搭建项目、编写代码、调试运行。一、项目概述1.1 项目名称Flutter 跨端 TODO 清单应用兼容鸿蒙 HarmonyOS1.2 实现功能添加待办任务标记任务完成/未完成删除任务本地数据持久化重启不丢失轻提示 Toast 反馈1.3 技术栈Flutter Dart三方库shared_preferences本地存储fluttertoast消息提示运行平台Android / iOS /鸿蒙 HarmonyOS二、环境准备2.1 必需工具Flutter SDK建议 3.13VS Code 或 Android Studio安装 Flutter Dart 插件鸿蒙设备一台或模拟器开启开发者模式与 USB 调试2.2 检查环境执行命令flutter doctor确保无关键报错能识别到连接设备即可。三、创建 Flutter 项目打开终端执行flutter create flutter_harmony_todocdflutter_harmony_todo项目结构简要说明lib/main.dart应用入口pubspec.yaml依赖配置类似鸿蒙的依赖管理文件assets/资源文件android/ios/各平台相关配置四、集成三方库打开pubspec.yaml在dependencies下添加dependencies:flutter:sdk:flutter# 本地持久化三方库shared_preferences:^2.2.3# 轻提示三方库fluttertoast:^8.2.8保存后执行安装flutter pub get五、编写代码带详细注释5.1 新建数据模型todo_model.dart在lib/下新建todo_model.dart/// 待办任务数据模型classTodoModel{Stringcontent;// 任务内容bool isDone;// 是否完成// 构造函数TodoModel({requiredthis.content,this.isDonefalse,});// 将对象转 Map用于本地存储MapString,dynamictoJson(){return{content:content,isDone:isDone,};}// 从 Map 恢复对象staticTodoModelfromJson(MapString,dynamicjson){returnTodoModel(content:json[content],isDone:json[isDone]??false,);}}5.2 主入口main.dart替换lib/main.dart全部内容importpackage:flutter/material.dart;// 本地存储三方库importpackage:shared_preferences/shared_preferences.dart;// Toast提示三方库importpackage:fluttertoast/fluttertoast.dart;// 导入模型importtodo_model.dart;// Flutter 应用入口voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:Flutter 鸿蒙 TODO,theme:ThemeData(primarySwatch:Colors.blue),home:constTodoPage(),debugShowCheckedModeBanner:false,);}}// 主页面有状态组件classTodoPageextendsStatefulWidget{constTodoPage({super.key});overrideStateTodoPagecreateState()_TodoPageState();}class_TodoPageStateextendsStateTodoPage{// 输入框控制器finalTextEditingController_contentControllerTextEditingController();// 任务列表finalListTodoModel_todoList[];// 本地存储实例lateSharedPreferences_prefs;overridevoidinitState(){super.initState();// 初始化本地存储_initLocalStorage();}/// 初始化 shared_preferences 并加载本地数据Futurevoid_initLocalStorage()async{_prefsawaitSharedPreferences.getInstance();_loadTodoList();}/// 从本地存储加载任务列表Futurevoid_loadTodoList()async{ListString?jsonList_prefs.getStringList(todo_list);if(jsonList!null){setState((){_todoList.addAll(jsonList.map((item)TodoModel.fromJson(item)),);});}}/// 保存任务列表到本地Futurevoid_saveTodoList()async{ListStringjsonList_todoList.map((e)e.toJson().toString()).toList();await_prefs.setStringList(todo_list,jsonList);}/// 添加任务Futurevoid_addTodo()async{Stringcontent_contentController.text.trim();if(content.isEmpty){Fluttertoast.showToast(msg:请输入任务内容);return;}setState((){_todoList.add(TodoModel(content:content));});_contentController.clear();_saveTodoList();Fluttertoast.showToast(msg:添加成功);}/// 切换完成状态Futurevoid_toggleDone(int index)async{setState((){_todoList[index].isDone!_todoList[index].isDone;});_saveTodoList();}/// 删除任务Futurevoid_deleteTodo(int index)async{setState((){_todoList.removeAt(index);});_saveTodoList();Fluttertoast.showToast(msg:删除成功);}overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText(Flutter × 鸿蒙 TODO 清单),),body:Padding(padding:constEdgeInsets.all(16),child:Column(children:[// 输入框 添加按钮Row(children:[Expanded(child:TextField(controller:_contentController,decoration:constInputDecoration(hintText:请输入待办事项,border:OutlineInputBorder(),),onSubmitted:(_)_addTodo(),),),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){finaltodo_todoList[index];returnListTile(leading:Checkbox(value:todo.isDone,onChanged:(_)_toggleDone(index),),title:Text(todo.content,style:TextStyle(decoration:todo.isDone?TextDecoration.lineThrough:null,color:todo.isDone?Colors.grey:null,),),trailing:IconButton(icon:constIcon(Icons.delete_outline,color:Colors.red),onPressed:()_deleteTodo(index),),);},),),],),),);}}六、运行到鸿蒙设备6.1 连接设备鸿蒙手机开启开发者模式、USB 调试电脑连接手机6.2 查看设备flutter devices6.3 运行项目flutter run稍等编译完成后App 会直接安装并打开在鸿蒙设备上。七、功能测试输入任务 → 点击添加勾选 CheckBox 标记完成点击删除图标移除任务退出 App 重新打开数据依然存在shared_preferences生效操作均有 Toast 提示fluttertoast生效八、核心知识点总结Flutter 三方库 鸿蒙Flutter跨平台 UI 框架一套代码多端运行采用 Dart 语言组件化开发三方库shared_preferences轻量本地存储类似鸿蒙偏好存储fluttertoast统一多端提示样式鸿蒙兼容Flutter 可直接编译运行在鸿蒙系统绝大多数 Flutter 三方库在鸿蒙上无需额外改造鸿蒙开发者可平滑过渡到跨端开发九、扩展方向集成网络库dio对接鸿蒙后端接口使用provider/riverpod做状态管理增加主题切换、暗黑模式打包发布为鸿蒙支持的 APK 格式如果你想要更正式的教程风格带目录、一级二级标题、适合发布掘金/知乎/CSDN我可以再给你生成一版更规范的排版。