Flutter 鸿蒙开发实战：集成三方库实现设备信息查询案例教程

Flutter 鸿蒙开发实战集成三方库实现设备信息查询案例教程包含Flutter 三方库 鸿蒙 HarmonyOS 完整实践新手入门版欢迎加入开源鸿蒙跨平台社区 https://openharmonycrossplatform.csdn.net一、前言本教程面向鸿蒙开发新手从零开始实现一个 Flutter 跨端项目重点演示Flutter 三方库 鸿蒙三者结合的完整开发流程。通过一个实用的设备信息展示 App你将学会Flutter 项目创建与鸿蒙环境配置Flutter 三方库引入与使用Flutter 应用在鸿蒙设备/模拟器上运行鸿蒙权限配置与基础适配二、环境准备2.1 必需工具Flutter SDK建议 3.13 及以上确保兼容鸿蒙适配DevEco Studio鸿蒙官方开发工具用于模拟器/真机调试VS Code / Android Studio安装 Flutter 插件用于编写 Flutter 代码鸿蒙真机开启 USB 调试或鸿蒙模拟器DevEco Studio 内置2.2 开启 Flutter 鸿蒙支持打开终端执行以下命令启用 Flutter 对鸿蒙系统的支持并检查环境是否配置成功# 启用鸿蒙系统支持仅首次配置需要flutter config --enable-harmonyos# 检查 Flutter 环境重点查看 HarmonyOS development 项flutter doctor确保终端输出中出现[✓] HarmonyOS development说明鸿蒙环境配置成功。三、创建 Flutter 项目打开终端执行以下命令创建 Flutter 项目项目名可自定义此处以 flutter_harmony_device 为例# 创建 Flutter 项目flutter create flutter_harmony_device# 进入项目目录后续所有操作均在该目录下执行cdflutter_harmony_device项目创建完成后可通过 VS Code 或 Android Studio 打开项目查看默认目录结构核心目录为 lib/用于编写 Flutter 代码harmony/ 目录为鸿蒙平台相关配置。四、集成三方库核心步骤本项目核心需求是获取鸿蒙设备信息选用device_info_plus三方库Flutter 官方推荐支持多端完美适配鸿蒙系统无需编写原生鸿蒙代码直接调用 API 即可获取设备信息。4.1 修改 pubspec.yaml 配置文件pubspec.yaml 是 Flutter 项目的依赖配置文件打开该文件在dependencies节点下添加三方库依赖name:flutter_harmony_devicedescription:A new Flutter project for HarmonyOS with third-party library.version:1.0.01environment:sdk:3.13.0 4.0.0dependencies:flutter:sdk:flutter# 核心三方库获取设备信息支持鸿蒙、Android、iOS等多端device_info_plus:^10.1.0dev_dependencies:flutter_test:sdk:flutterflutter_lints:^2.0.04.2 安装三方库依赖添加依赖后终端执行以下命令拉取三方库资源完成安装flutter pub get当终端输出Running flutter pub get in flutter_harmony_device... Done说明三方库安装成功。若安装失败可执行flutter clean清理缓存后重新执行flutter pub get。五、编写核心代码lib/main.dart删除 lib/main.dart 文件中的默认代码粘贴以下完整代码代码带详细注释新手可直接复制使用重点理解三方库调用逻辑// 导入 Flutter 核心 UI 库用于构建界面importpackage:flutter/material.dart;// 导入三方库 device_info_plus核心用于获取设备信息importpackage:device_info_plus/device_info_plus.dart;// 程序入口启动 Flutter 应用voidmain(){runApp(constMyApp());}// 根组件无状态组件整个应用的入口界面classMyAppextendsStatelessWidget{constMyApp({super.key});overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:Flutter 三方库 鸿蒙,// 应用标题theme:ThemeData(primarySwatch:Colors.blue),// 应用主题色适配鸿蒙系统视觉debugShowCheckedModeBanner:false,// 关闭调试模式的右上角标签home:constDeviceInfoPage(),// 应用首页设备信息展示页面);}}// 设备信息展示页面有状态组件需动态获取并展示设备信息classDeviceInfoPageextendsStatefulWidget{constDeviceInfoPage({super.key});// 创建状态对象用于管理页面动态数据overrideStateDeviceInfoPagecreateState()_DeviceInfoPageState();}class_DeviceInfoPageStateextendsStateDeviceInfoPage{// 1. 创建三方库 DeviceInfoPlugin 实例用于调用获取设备信息的 APIfinalDeviceInfoPlugin_deviceInfoPluginDeviceInfoPlugin();// 2. 定义 Map 用于存储获取到的鸿蒙设备信息初始为空MapString,String_harmonyDeviceInfo{};// 页面初始化方法页面加载时自动执行仅执行一次overridevoidinitState(){super.initState();// 调用自定义方法获取鸿蒙设备信息_getHarmonyDeviceInfo();}// 核心方法通过三方库异步获取鸿蒙设备信息// 用 async/await 处理异步操作获取设备信息是耗时操作避免阻塞界面Futurevoid_getHarmonyDeviceInfo()async{try{// 调用三方库的 harmonyOsInfo 方法专门获取鸿蒙系统设备信息finalharmonyInfoawait_deviceInfoPlugin.harmonyOsInfo;// 解析获取到的信息存入 _harmonyDeviceInfo并用 setState 刷新界面setState((){_harmonyDeviceInfo{设备品牌:harmonyInfo.brand??未知品牌,// 设备品牌如华为、荣耀设备型号:harmonyInfo.model??未知型号,// 设备具体型号如 Mate 60 Pro鸿蒙系统版本:harmonyInfo.version??未知版本,// 鸿蒙系统版本如 4.0.0设备代号:harmonyInfo.device??未知代号,// 设备内部代号设备制造商:harmonyInfo.manufacturer??未知制造商// 设备制造商};});}catch(e){// 异常处理若获取信息失败展示错误信息setState((){_harmonyDeviceInfo{获取失败:原因${e.toString()}};});}}// 构建页面 UI 界面overrideWidgetbuild(BuildContextcontext){returnScaffold(// 顶部导航栏appBar:AppBar(title:constText(Flutter 鸿蒙三方库实战),// 导航栏标题centerTitle:true,// 标题居中适配鸿蒙手机界面习惯),// 页面主体可滚动避免内容超出屏幕body:SingleChildScrollView(padding:constEdgeInsets.all(16),// 整体内边距提升界面美观度child:Column(crossAxisAlignment:CrossAxisAlignment.start,// 子组件左对齐children:[// 标题文本constText(鸿蒙设备信息三方库获取,style:TextStyle(fontSize:20,fontWeight:FontWeight.bold,color:Colors.black87),),constSizedBox(height:20),// 间距分隔标题和内容// 遍历 _harmonyDeviceInfo用卡片展示每一条设备信息..._harmonyDeviceInfo.entries.map((infoItem){returnCard(margin:constEdgeInsets.only(bottom:12),// 卡片之间的间距elevation:2,// 卡片阴影提升层次感适配鸿蒙视觉风格child:Padding(padding:constEdgeInsets.all(16),// 卡片内边距child:Row(children:[// 信息标题加粗区分标题和内容Text(${infoItem.key},style:constTextStyle(fontSize:16,fontWeight:FontWeight.w500,color:Colors.blue),),// 信息内容自适应宽度避免内容溢出Expanded(child:Text(infoItem.value,style:constTextStyle(fontSize:16,color:Colors.black87),),),],),),);}).toList(),],),),);}}代码核心说明三方库调用通过DeviceInfoPlugin实例的harmonyOsInfo方法直接获取鸿蒙设备信息无需编写原生鸿蒙代码简化开发流程。异步处理获取设备信息是耗时操作使用async/await处理异步避免界面卡顿提升用户体验。UI 适配采用 Flutter 原生组件自动适配鸿蒙设备屏幕尺寸卡片式布局贴合鸿蒙系统视觉风格。异常处理添加 try-catch 捕获异常避免因设备权限、系统版本等问题导致应用崩溃提升应用稳定性。六、鸿蒙平台适配配置必做Flutter 应用运行在鸿蒙设备上需配置鸿蒙平台的权限和 SDK 版本否则会出现无法获取设备信息、编译失败等问题。6.1 添加设备信息获取权限打开项目目录下的harmony/src/main/module.json5文件在module节点下添加设备信息获取权限鸿蒙系统获取设备信息需明确申请权限{module:{name:entry,type:entry,description:Flutter 鸿蒙三方库实战主模块,mainElement:MainAbility,deviceTypes:[phone,tablet],abilities:[{name:MainAbility,srcEntry:./ets/MainAbility.ets,description:主 Ability启动应用入口,launchType:standard,skills:[{entities:[entity.system.home],actions:[action.system.home]}]}],// 核心添加设备信息获取权限必须配置否则无法获取设备信息requestPermissions:[{name:ohos.permission.GET_DEVICE_INFO}]}}6.2 配置鸿蒙 SDK 版本打开项目目录下的harmony/build-profile.json5文件确保鸿蒙 SDK 版本 ≥ 4.0device_info_plus 三方库要求鸿蒙 SDK 4.0 及以上{product:[{name:default,compileSdkVersion:4.0,// 编译 SDK 版本compatibleSdkVersion:4.0,// 兼容 SDK 版本targetSdkVersion:4.0// 目标 SDK 版本可选建议与编译版本一致}]}七、运行项目鸿蒙设备/模拟器配置完成后即可将 Flutter 应用运行到鸿蒙设备或模拟器上查看实际效果。7.1 连接鸿蒙设备/启动模拟器模拟器打开 DevEco Studio创建并启动鸿蒙手机模拟器建议选择鸿蒙 4.0 及以上版本。真机用 USB 数据线连接鸿蒙手机在手机上开启USB 调试和允许安装未知来源应用设置 → 系统和更新 → 开发者选项。7.2 查看已连接设备终端执行以下命令查看当前已连接的鸿蒙设备flutter devices终端会输出已连接的设备信息例如HarmonyOS Emulator (mobile) • emulator-5554 • harmony • HarmonyOS 4.0 (API 10)说明设备连接成功。7.3 运行 Flutter 应用终端执行以下命令将应用编译并安装到鸿蒙设备上flutter run等待编译完成首次编译时间较长耐心等待鸿蒙设备上会自动安装并打开应用成功展示通过三方库获取的鸿蒙设备信息。八、预期效果应用运行成功后界面展示如下适配鸿蒙系统风格顶部导航栏显示“Flutter 鸿蒙三方库实战”居中对齐。主体内容标题“鸿蒙设备信息三方库获取”下方用卡片列表展示 5 条核心设备信息设备品牌设备型号鸿蒙系统版本设备代号设备制造商异常情况若获取信息失败会显示“获取失败原因XXX”便于排查问题。九、新手常见问题及解决方法问题1flutter run 找不到鸿蒙设备解决方法重新启动鸿蒙模拟器/插拔真机确保设备连接正常。重新执行flutter config --enable-harmonyos重启终端后再次查看设备。检查 DevEco Studio 是否正常运行模拟器是否启动成功。问题2三方库获取设备信息失败显示“获取失败”解决方法检查module.json5文件是否添加ohos.permission.GET_DEVICE_INFO权限。检查鸿蒙设备/模拟器的系统版本是否 ≥ 4.0低于 4.0 版本不支持该三方库。执行flutter clean→flutter pub get重新运行项目。问题3编译报错提示“找不到相关依赖”或“编译失败”解决方法检查 Flutter SDK 版本是否 ≥ 3.13.0版本过低会导致依赖不兼容。删除项目根目录下的.pub-cache文件夹重新执行flutter pub get。确保三方库版本正确本文使用的 device_info_plus: ^10.1.0 适配鸿蒙 4.0。十、总结本教程通过一个简单实用的设备信息展示项目完整演示了Flutter 三方库 鸿蒙的开发全流程核心要点总结如下环境配置启用 Flutter 鸿蒙支持确保 Flutter SDK、DevEco Studio 环境正常。三方库集成通过 pubspec.yaml 添加依赖执行 flutter pub get 完成安装无需原生开发。代码编写调用三方库 API 异步获取鸿蒙设备信息用 Flutter 组件构建适配鸿蒙的 UI 界面。鸿蒙适配配置设备权限和 SDK 版本确保应用能在鸿蒙设备上正常运行。作为鸿蒙开发者掌握 Flutter 跨端开发 三方库集成能极大提升开发效率实现“一套代码多端运行”无需分别开发鸿蒙、Android、iOS 应用降低开发成本。后续可基于本项目扩展更多功能如网络请求、本地存储等进一步提升 Flutter 鸿蒙开发能力。文档说明本文为纯 Markdown 格式可直接复制到 Typora、VS Code、Markdown 编辑器等工具中查看所有代码可直接复制运行适配 Flutter 3.13.0、鸿蒙 4.0 版本。