Flutter跨平台开发：集成三方库构建鸿蒙6.0校园通知公告APP

欢迎加入开源鸿蒙跨平台社区 https://openharmonycrossplatform.csdn.net本文为鸿蒙6.0环境下的Flutter新手入门实践基于校园通知公告项目实现Flutter集成三方库开发鸿蒙应用。一、文章前言本项目基于 Flutter适配鸿蒙6.0系统通过集成常用三方库实现一个功能完整的跨平台校园通知公告APP。通过本项目你将学到Flutter 项目鸿蒙6.0运行环境配置Flutter 集成三方库本地存储、图标、状态管理鸿蒙6.0真机/模拟器运行Flutter项目完整校园通知公告增删改查功能实现项目名称Flutter鸿蒙校园通知公告APP基于三方库实现本地持久化存储二、项目准备环境检查安装 Flutter SDK3.10及以上版本安装 鸿蒙DevEco Studio需支持鸿蒙6.0系统开启鸿蒙6.0模拟器或连接鸿蒙6.0真机配置Flutter支持鸿蒙平台后续步骤会补充此处先完成基础环境安装环境安装完成后打开终端执行以下命令检查环境是否正常flutter doctor当终端输出中出现[✓] HarmonyOS字样说明Flutter适配鸿蒙的环境配置正常可以开始项目开发。三、创建Flutter项目步骤1终端创建项目打开终端进入目标文件夹执行以下命令创建项目名称可自行修改flutter create flutter_harmony_school_noticecdflutter_harmony_school_notice步骤2启用鸿蒙平台执行以下命令启用Flutter对鸿蒙平台的支持并添加配置flutter config --enable-harmonyos flutter create.--platformsharmonyos执行完成后项目会自动生成鸿蒙平台相关的配置文件无需手动修改。步骤3打开项目用Android Studio或VS Code打开项目等待加载完成。四、集成三方库核心步骤本项目集成3个常用Flutter三方库覆盖核心需求具体如下shared_preferences轻量级本地持久化存储库用于保存校园通知公告内容实现“关闭APP后数据不丢失”fluttertoast轻量提示框库用于添加、删除通知公告时的反馈提示iconsax精美图标库用于按钮、通知列表的图标展示提升界面美观度步骤1添加三方库依赖在项目根目录的pubspec.yaml文件中于dependencies节点下添加以下依赖注意缩进与flutter sdk对齐dependencies:flutter:sdk:flutter# 本地存储 三方库用于保存校园通知shared_preferences:^2.2.2# 提示框 三方库用于操作反馈fluttertoast:^8.2.2# 图标 三方库用于界面图标展示iconsax:^0.0.8步骤2安装三方库保存文件后在终端执行以下命令安装三方库flutter pub get终端输出“Process finished with exit code 0”说明三方库安装成功若出现报错可检查依赖版本是否正确或执行flutter pub upgrade更新依赖。五、完整项目代码可直接复制使用核心代码位于lib/main.dart以下为完整带注释代码可直接复制替换importpackage:flutter/material.dart;importpackage:shared_preferences/shared_preferences.dart;// 导入本地存储三方库importpackage:fluttertoast/fluttertoast.dart;// 导入提示框三方库importpackage:iconsax/iconsax.dart;// 导入图标三方库// 程序入口Flutter项目固定写法所有代码从这里开始执行voidmain(){runApp(constMyApp());}// 根组件整个APP的入口组件是一个无状态组件不需要动态刷新classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){// MaterialAppFlutter的基础组件提供APP的基础配置标题、主题、首页等returnMaterialApp(title:Flutter鸿蒙校园通知,// APP标题鸿蒙桌面显示的APP名称theme:ThemeData(primarySwatch:Colors.blue),// APP主题色蓝色贴合校园风格debugShowCheckedModeBanner:false,// 关闭调试标签上线前必须关闭home:constNoticeScreen(),// APP首页校园通知列表页面);}}// 主页面校园通知列表页面是一个有状态组件需要动态刷新列表classNoticeScreenextendsStatefulWidget{constNoticeScreen({super.key});overrideStateNoticeScreencreateState()_NoticeScreenState();}// 主页面状态类处理页面的动态数据和交互逻辑class_NoticeScreenStateextendsStateNoticeScreen{// 存储所有校园通知的列表字符串类型每一个元素就是一条通知ListStringnoticeList[];// 输入框控制器用于获取输入框中的通知内容添加通知时使用finalTextEditingController_noticeControllerTextEditingController();// 初始化方法页面启动时自动执行用于加载本地存储的校园通知overridevoidinitState(){super.initState();loadNotices();// 调用加载通知的方法}// ———————— 核心三方库 shared_preferences 读取本地数据 ————————// 异步方法因为读取本地数据需要时间不能阻塞页面渲染FuturevoidloadNotices()async{// 初始化shared_preferences实例固定写法finalprefsawaitSharedPreferences.getInstance();// 从本地存储中获取key为notices的数据没有则返回空数组setState((){noticeListprefs.getStringList(notices)??[];});}// ———————— 核心三方库 shared_preferences 保存数据到本地 ————————FuturevoidsaveNotices()async{finalprefsawaitSharedPreferences.getInstance();// 将通知列表保存到本地key为notices与读取时的key一致awaitprefs.setStringList(notices,noticeList);}// 添加校园通知的方法点击“加号”按钮时执行voidaddNotice(){// 判断输入框内容是否为空去除空格后判断if(_noticeController.text.trim().isEmpty){// 三方库 fluttertoast 弹出提示请输入通知内容Fluttertoast.showToast(msg:请输入通知内容);return;// 为空则不执行后续操作}// 刷新页面状态将输入框内容添加到通知列表setState((){noticeList.add(_noticeController.text.trim());});saveNotices();// 调用保存方法将新的通知列表保存到本地_noticeController.clear();// 清空输入框Fluttertoast.showToast(msg:通知添加成功);// 弹出添加成功提示}// 删除校园通知的方法点击垃圾桶图标时执行传入当前通知的索引voiddeleteNotice(int index){setState((){noticeList.removeAt(index);// 根据索引删除对应的通知});saveNotices();// 保存删除后的通知列表Fluttertoast.showToast(msg:通知删除成功);// 弹出删除成功提示}// 构建页面UI页面的所有布局和组件都在这里编写overrideWidgetbuild(BuildContextcontext){// Scaffold基础页面容器包含导航栏、主体内容等returnScaffold(// 导航栏顶部标题栏appBar:AppBar(title:constText(Flutter × 鸿蒙6.0 校园通知公告),// 导航栏标题centerTitle:true,// 标题居中),// 主体内容 Padding 用于设置内边距避免内容贴边body:Padding(padding:constEdgeInsets.all(16.0),// 上下左右各16像素内边距child:Column(// 垂直排列组件输入框列表children:[// 输入框 添加按钮水平排列Row(children:[// Expanded让输入框占满剩余空间与按钮并排时常用Expanded(child:TextField(controller:_noticeController,// 绑定输入框控制器decoration:constInputDecoration(hintText:输入校园通知内容...,// 输入提示文字贴合校园场景border:OutlineInputBorder(),// 输入框边框),),),constSizedBox(width:10),// 输入框和按钮之间的间距10像素// 添加按钮使用三方库 iconsax 的加号图标ElevatedButton(onPressed:addNotice,// 点击按钮执行addNotice方法child:constIcon(Iconsax.add,size:20),// 加号图标大小20),],),constSizedBox(height:20),// 输入框和列表之间的间距20像素// 校园通知列表Expanded让列表占满剩余空间避免溢出Expanded(child:noticeList.isEmpty// 列表为空时显示提示文字?constCenter(child:Text(暂无校园通知快去添加吧~))// 列表不为空时渲染通知列表:ListView.builder(itemCount:noticeList.length,// 列表项数量 通知数量// 构建每一个列表项index当前列表项的索引itemBuilder:(context,index){returnCard(margin:constEdgeInsets.only(bottom:8),// 每个卡片的底部间距child:ListTile(leading:constIcon(Iconsax.notification,color:Colors.blue),// 通知图标贴合校园场景title:Text(noticeList[index]),// 显示通知内容// 右侧垃圾桶图标删除按钮trailing:IconButton(icon:constIcon(Iconsax.trash,color:Colors.red),onPressed:()deleteNotice(index),// 点击执行删除方法),),);},),),],),),);}}六、鸿蒙6.0运行步骤超详细新手必看步骤1打开鸿蒙6.0模拟器打开DevEco Studio点击顶部菜单栏的Tools → Device Manager设备管理器在设备管理器中点击新建选择设备类型为Phone选择系统版本为HarmonyOS 6.0点击启动等待模拟器启动。步骤2运行Flutter项目确保项目加载完成终端切换至项目根目录执行以下命令将项目运行到鸿蒙设备flutter run-dharmony命令执行后Flutter会自动编译并安装APP完成后可直接查看效果。七、功能说明运行后可直接测试项目运行后可测试以下核心功能均基于三方库实现添加通知在输入框中输入校园通知内容点击右侧加号按钮即可添加一条通知同时弹出“通知添加成功”提示删除通知点击每条通知右侧的红色垃圾桶图标即可删除该通知同时弹出“通知删除成功”提示持久化存储关闭APP后重新打开之前添加的校园通知不会丢失由shared_preferences三方库实现空内容提示若输入框为空点击加号按钮会弹出“请输入通知内容”提示由fluttertoast三方库实现精美图标添加按钮、通知图标、删除按钮均来自iconsax三方库界面简洁美观贴合校园场景。八、核心知识点总结新手必看通过本项目重点掌握以下核心知识点Flutter 鸿蒙6.0 适配通过简单的命令配置即可让Flutter项目运行在鸿蒙6.0系统上实现“一套代码多端运行”三方库集成这是Flutter开发核心能力掌握后可应对大部分基础需求状态管理使用 setState 方法实现页面动态刷新当校园通知列表发生变化添加、删除时页面会自动更新持久化存储通过shared_preferences三方库实现校园通知数据本地保存解决“APP重启后数据丢失”的问题。补充说明若运行报错“鸿蒙设备未找到”检查模拟器是否启动或执行flutter devices查看设备三方库版本可按需更新出现兼容问题可降至本文指定版本本项目可作为入门练手项目后续可扩展通知编辑、分类、搜索等校园实用功能。