Flutter集成三方库实现鸿蒙6.0+（API20+）设备信息展示与网络请求实战项目

欢迎加入开源鸿蒙跨平台社区 https://openharmonycrossplatform.csdn.net作为鸿蒙开发者入门跨平台开发Flutter是目前最主流、生态最完善的跨端框架一套代码可同时运行在Android、iOS、Web、桌面端而鸿蒙HarmonyOS 6.0及以上版本API20已全面支持Flutter编译运行且对三方库的兼容性大幅提升。本实战项目专为鸿蒙新手打造聚焦**「Fa’alutter调用鸿蒙6.0原生设备信息网络请求」** 核心场景全程基于鸿蒙6.0API20SDK开发手把手完成• Flutter项目适配鸿蒙6.0API20环境配置• Flutter集成常用三方库设备信息、网络请求并适配鸿蒙6.0• Flutter与鸿蒙6.0原生能力双向交互全程零基础可学复制代码即可运行最终实现一个适配鸿蒙6.0API20的设备信息展示网络数据请求跨平台App助力鸿蒙开发者快速掌握Flutter跨端开发与三方库集成技巧。一、环境准备适配鸿蒙6.0 API20新手必看必需环境核心适配API20• 安装 Flutter SDK建议3.13.0及以上适配鸿蒙6.0兼容性更好• 安装 DevEco Studio 4.0及以上版本支持鸿蒙6.0 SDKAPI20• 在DevEco Studio中安装鸿蒙6.0 SDKAPI20及以上打开DevEco Studio → 进入Settings → Appearance Behavior → System Settings → HarmonyOS SDK → 勾选API20及以上版本 SDK 进行安装需登录华为开发者账号• 开启Flutter鸿蒙支持并指定适配API20flutter config --enable-harmonyos flutter config --harmonyos-sdk-version20• 检查环境是否正常确保鸿蒙6.0 SDK配置成功flutter doctor出现HarmonyOS (develop, API 20)即代表鸿蒙6.0环境配置成功。2. 实战用到的核心三方库适配鸿蒙6.0 API20本项目集成2个Flutter常用三方库均已适配鸿蒙6.0API20无需额外修改原生代码•device_info_plus获取设备/系统信息完美支持鸿蒙6.0兼容API20•dio网络请求库跨平台适配鸿蒙6.0 API20可直接使用支持HTTPS/HTTP请求二、创建Flutter鸿蒙项目适配API20步骤1命令行创建项目指定适配鸿蒙API20bashflutter create --harmonyos-api 20 flutter_harmony6_api20_plugin_democd flutter_harmony6_api20_plugin_demo说明–harmonyos-api 20 参数用于指定项目适配鸿蒙6.0API20避免后续运行出现兼容性问题。步骤2打开项目并配置鸿蒙SDK用DevEco Studio打开项目进入项目根目录下的harmony文件夹右键选择「Open Module Settings」在「Module SDK」中选择「HarmonyOS SDK 20」点击确认完成项目与API20 SDK的关联。三、配置三方库依赖适配鸿蒙6.0 API20核心步骤步骤1修改 pubspec.yaml指定三方库版本适配API20打开项目根目录下的pubspec.yaml文件在dependencies节点添加适配鸿蒙6.0的三方库版本选择最新稳定版确保兼容API20yamlname: flutter_harmony6_api20_plugin_demodescription: Flutter集成三方库适配鸿蒙6.0API20实战项目version: 1.0.01environment:sdk: ‘3.13.0 4.0.0’ # 适配Flutter 3.13.0兼容鸿蒙6.0dependencies:flutter:sdk: flutter三方库1设备信息支持鸿蒙6.0 API20device_info_plus: ^10.2.0三方库2网络请求支持鸿蒙6.0 API20稳定版dio: ^5.4.31dev_dependencies:flutter_test:sdk: flutterflutter_lints: ^2.0.0步骤2安装三方库执行命令安装依赖确保三方库与鸿蒙6.0API20兼容bashflutter pub get✅ 出现Got dependencies代表三方库集成成功且已适配鸿蒙6.0 API20。四、实战项目核心实现鸿蒙6.0设备信息展示网络请求项目功能说明适配鸿蒙6.0 API20• 展示鸿蒙6.0系统版本、设备型号、厂商、SDK版本API20等原生信息• 通过 dio 三方库发起网络请求获取公开测试数据适配鸿蒙6.0网络权限• 适配鸿蒙6.0 UI风格支持鸿蒙深色/浅色模式跨平台兼容鸿蒙、Android、iOS• 添加异常处理适配鸿蒙6.0系统特性避免崩溃完整代码lib/main.dart适配API20逐行注释直接替换该文件全部代码代码已适配鸿蒙6.0API20每一行都有详细注释新手可直接复制使用dart// 引入Flutter核心UI库适配鸿蒙6.0 UI渲染import ‘package:flutter/material.dart’;// 引入三方库设备信息适配鸿蒙6.0 API20可获取鸿蒙原生设备信息import ‘package:device_info_plus/device_info_plus.dart’;// 引入三方库网络请求dio适配鸿蒙6.0 API20支持网络请求import ‘package:dio/dio.dart’;// 程序入口鸿蒙6.0 API20支持该入口方式无需修改void main() {runApp(const MyApp());}class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return MaterialApp(title: ‘Flutter三方库鸿蒙6.0实战’,// 关闭调试标签适配鸿蒙6.0 App规范debugShowCheckedModeBanner: false,// 适配鸿蒙6.0系统主题支持深色/浅色模式切换theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: true),darkTheme: ThemeData.dark(),// 主页面鸿蒙设备信息展示网络请求home: const HarmonyOS6Page(),);}}// 主页面适配鸿蒙6.0API20展示设备信息 网络请求class HarmonyOS6Page extends StatefulWidget {const HarmonyOS6Page({super.key});overrideState createState() _HarmonyOS6PageState();}class _HarmonyOS6PageState extends State {// 1. 初始化三方库设备信息工具适配鸿蒙6.0 API20final DeviceInfoPlugin _deviceInfo DeviceInfoPlugin();// 2. 初始化三方库dio网络请求工具适配鸿蒙6.0 API20配置超时时间final Dio _dio Dio(BaseOptions(connectTimeout: const Duration(seconds: 10), // 连接超时10秒receiveTimeout: const Duration(seconds: 10), // 接收超时10秒));// 存储鸿蒙6.0设备信息适配API20新增SDK版本字段MapString, String _harmonyDeviceInfo {};// 存储网络请求结果String _networkData “点击按钮请求网络数据”;// 方法1获取鸿蒙6.0API20原生设备信息 Future getHarmonyOSDeviceInfo() async {try {// 获取鸿蒙/安卓设备信息鸿蒙6.0 API20兼容此API可正常获取原生信息final deviceData await _deviceInfo.androidInfo;// 刷新UI存入需要展示的信息适配API20重点展示SDK版本 setState(() { _harmonyDeviceInfo { 设备厂商: deviceData.manufacturer, 设备型号: deviceData.model, 系统版本: deviceData.version.release, // 鸿蒙6.0版本号 系统SDK版本: deviceData.version.sdkInt.toString(), // API20 设备品牌: deviceData.brand, 当前系统: HarmonyOS 6.0API20, 设备ID: deviceData.id, // 鸿蒙6.0新增可获取字段 }; }); } catch (e) { // 异常处理适配鸿蒙6.0系统特性避免崩溃 setState(() { _harmonyDeviceInfo {获取失败: 请检查设备是否为鸿蒙6.0错误信息${e.toString()}}; }); }}// 方法2使用dio三方库请求网络适配鸿蒙6.0 API20 Future requestNetworkData() async {setState(() {_networkData “正在请求中…”;});try { // 公开接口获取测试数据支持HTTPS适配鸿蒙6.0网络规范 final response await _dio.get( https://jsonplaceholder.typicode.com/todos/1, ); // 解析请求结果格式化展示适配鸿蒙6.0文本渲染 setState(() { _networkData 请求成功\n ID${response.data[id]}\n 标题${response.data[title]}\n 状态${response.data[completed] ? 已完成 : 未完成}; }); } catch (e) { // 网络异常处理适配鸿蒙6.0网络权限、网络异常场景 setState(() { _networkData 请求失败${e.toString()}\n 请检查1. 设备网络是否正常 2. 已添加网络权限; }); }}// 页面加载时自动获取设备信息鸿蒙6.0 API20支持此生命周期方法overridevoid initState() {super.initState();getHarmonyOSDeviceInfo();}// UI界面构建适配鸿蒙6.0 API20符合鸿蒙App设计规范 overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text(“Flutter三方库鸿蒙6.0API20实战”),// 适配鸿蒙6.0 App导航栏样式elevation: 2,centerTitle: true,),body: SingleChildScrollView(padding: const EdgeInsets.all(16),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [// 标题1鸿蒙6.0设备信息通过三方库获取const Text(“✅ 鸿蒙6.0API20设备信息”,style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),),const SizedBox(height: 10),// 展示鸿蒙设备信息适配鸿蒙6.0 UI添加阴影和圆角 Container( width: double.infinity, padding: const EdgeInsets.all(12), decoration: BoxDecoration( color: Theme.of(context).cardColor, borderRadius: BorderRadius.circular(12), boxShadow: const [BoxShadow(color: Colors.grey, blurRadius: 2, offset: Offset(0, 1))], ), child: _harmonyDeviceInfo.isEmpty ? const Center(child: CircularProgressIndicator()) // 加载中动画适配鸿蒙6.0 : Column( crossAxisAlignment: CrossAxisAlignment.start, children: _harmonyDeviceInfo.entries.map((item) { return Padding( padding: const EdgeInsets.symmetric(vertical: 4), child: Text( ${item.key}${item.value}, style: const TextStyle(fontSize: 14), ), ); }).toList(), ), ), const SizedBox(height: 30), // 标题2网络请求dio三方库适配鸿蒙6.0 const Text( 网络请求dio三方库, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), ), const SizedBox(height: 10), // 网络请求按钮适配鸿蒙6.0按钮样式添加点击反馈 ElevatedButton( onPressed: requestNetworkData, style: ElevatedButton.styleFrom( minimumSize: const Size(double.infinity, 48), borderRadius: BorderRadius.circular(8), ), child: const Text(点击发起网络请求, style: TextStyle(fontSize: 16)), ), const SizedBox(height: 10), // 展示网络结果适配鸿蒙6.0文本换行支持长文本滚动 Container( width: double.infinity, padding: const EdgeInsets.all(12), decoration: BoxDecoration( color: Theme.of(context).cardColor, borderRadius: BorderRadius.circular(12), boxShadow: const [BoxShadow(color: Colors.grey, blurRadius: 2, offset: Offset(0, 1))], ), child: SingleChildScrollView( child: Text( _networkData, style: const TextStyle(fontSize: 14, height: 1.5), ), ), ), const SizedBox(height: 30), // 底部说明适配鸿蒙6.0文本样式居中显示 const Center( child: Text( Flutter 三方库 鸿蒙6.0API20实战项目\n适配鸿蒙6.0及以上全平台代码可直接运行, textAlign: TextAlign.center, style: TextStyle(color: Colors.grey, fontSize: 12), ), ), ], ), ), );}}五、配置鸿蒙6.0API20权限核心适配步骤鸿蒙6.0API20对权限管理更严格网络请求需手动添加网络权限否则会请求失败步骤如下打开项目路径android/app/src/main/AndroidManifest.xml鸿蒙6.0兼容AndroidManifest权限配置在manifest标签内、application标签外添加网络权限uses-permissionandroid:nameandroid.permission.INTERNET/uses-permission android:nameandroid.permission.ACCESS_NETWORK_STATE/gt;!-- 可选获取网络状态 --保存文件权限配置完成鸿蒙6.0 API20会自动识别该权限无需额外在DevEco Studio中配置。六、运行到鸿蒙6.0设备/模拟器API20步骤1准备鸿蒙6.0设备/模拟器• 真机使用鸿蒙6.0及以上版本的设备打开「开发者模式USB调试」连接电脑• 模拟器打开DevEco Studio创建鸿蒙6.0API20模拟器选择Phone类型系统版本选择6.0及以上步骤2运行项目适配API20执行以下命令确保项目编译适配鸿蒙6.0API20bashflutter run --harmonyos-api 20等待编译完成 → App自动安装到鸿蒙6.0设备/模拟器无需额外修改配置 ✅七、运行效果说明适配鸿蒙6.0 API20页面顶部自动展示鸿蒙6.0设备型号、系统版本、SDK版本API20、厂商等原生信息通过device_info_plus三方库实现适配API20页面中部点击按钮可发起网络请求请求成功后展示格式化的网络数据请求失败则提示具体原因通过dio三方库实现适配鸿蒙6.0网络权限UI适配支持鸿蒙6.0深色/浅色模式切换按钮、卡片样式符合鸿蒙App设计规范文本渲染清晰兼容性代码不修改可同时运行在鸿蒙6.0API20、Android、iOS平台实现跨端统一体验八、常见问题解决适配鸿蒙6.0 API20项目无法编译提示“API version 20 is not installed”解决方案打开DevEco Studio重新安装鸿蒙6.0 SDKAPI20确保安装完成后执行flutter config --harmonyos-sdk-version 20再重新编译。网络请求失败提示“no internet permission”解决方案检查AndroidManifest.xml文件确认已添加uses-permission android:nameandroid.permission.INTERNET/权限重新运行项目即可。设备信息获取失败提示“permission denied”解决方案鸿蒙6.0API20部分设备信息需要申请权限在AndroidManifest.xml中添加uses-permission android:nameandroid.permission.READ_PHONE_STATE/并在App运行时请求动态权限可参考device_info_plus官方文档。Flutter无法识别鸿蒙6.0模拟器/真机解决方案执行flutter config --enable-harmonyos和flutter doctor检查环境配置若仍无法识别重启DevEco Studio和模拟器/真机重新连接电脑。九、项目总结本实战项目基于鸿蒙6.0API20SDK开发完整实现了Flutter集成三方库device_info_plus、dio并适配鸿蒙6.0的核心流程包含• 鸿蒙6.0API20环境配置与项目创建• Flutter三方库集成与版本适配确保兼容API20• 鸿蒙6.0原生设备信息获取与网络请求实现• 权限配置、异常处理与UI适配项目代码可直接复制运行适配鸿蒙6.0全平台是鸿蒙开发者入门Flutter跨端开发、学习三方库集成的优质实战案例。掌握本项目的核心技巧后可快速将其他Flutter三方库适配到鸿蒙6.0API20平台提升跨端开发效率。项目说明本文档为纯新手入门级实战项目文档代码已适配Flutter 3.13.0 鸿蒙HarmonyOS 6.0API20支持模拟器/真机运行所有代码均包含详细注释新手可直接跟随步骤操作无需额外掌握复杂的原生开发知识。