Flutter + 三方库 + 鸿蒙（HarmonyOS）跨平台应用开发实战（SDK 20+）

flutter跨平台鸿蒙应用

Crystal_Sun

491人浏览 · 2026-04-27 15:45:44

Crystal_Sun · 2026-04-27 15:45:44 发布

Flutter + 三方库 + 鸿蒙（HarmonyOS）跨平台应用开发实战（SDK 20+）

适配环境：Flutter 3.27.5-ohos-1.0.5、DevEco Studio 6.0.0、HarmonyOS SDK 20（模拟器/真机）、Windows 10/11
核心技术：Flutter 跨平台开发、shared_preferences（本地存储）、fluttertoast（消息提示）、dio（网络请求）、鸿蒙原生工程适配
适用人群：Flutter 开发者、鸿蒙跨平台学习者、需要快速落地跨平台项目的开发人员

一、前言

随着鸿蒙（HarmonyOS）生态的持续完善，跨平台开发已成为移动端开发的核心需求之一。Flutter 作为主流跨平台框架，官方推出了鸿蒙定制适配版本，实现“一套代码、多端运行”，可直接兼容 Android、iOS、鸿蒙三大平台。

本文将从零开始，手把手带你搭建一个完整的 Flutter + 三方库 + 鸿蒙跨平台应用，涵盖本地存储、网络请求、消息提示三大核心功能，所有步骤、配置、代码均可直接复制运行，兼顾实用性与可操作性，适合用于技术学习、项目实战及文章发布。

二、环境准备

2.1 必备环境清单

Flutter 版本：3.27.5-ohos-1.0.5（鸿蒙官方适配版，已验证可正常适配鸿蒙 SDK 20）
开发工具：DevEco Studio 6.0.0+（用于配置鸿蒙工程）、VS Code/Android Studio（用于编写 Flutter 代码）
鸿蒙环境：HarmonyOS SDK API 20（模拟器或真机，本文以 SDK 20 模拟器为例）
Dart 版本：3.6.2+（Flutter 3.27.5-ohos 自带，无需额外安装）

2.2 工具分工说明

重点注意：Flutter 项目与鸿蒙工程为“嵌套独立”结构，需区分工具打开目录：

VS Code / Android Studio：打开 Flutter 项目根目录（如：E:\FlutterOpenHarmony\flutter_harmony_demo），用于编写 Flutter 业务代码、管理三方库。
DevEco Studio 6.0.0+：仅打开项目中的 ohos 文件夹（如：E:\FlutterOpenHarmony\flutter_harmony_demo\ohos），用于配置鸿蒙 SDK、权限、签名等原生配置。

三、创建 Flutter 鸿蒙跨平台项目

3.1 终端执行创建命令

打开 Windows 终端（管理员模式），切换到你的工作目录（如 E:\FlutterOpenHarmony），执行以下命令，创建支持鸿蒙、Android、iOS 三平台的 Flutter 项目：

flutter create --platforms=android,ios,ohos flutter_harmony_demo

3.2 进入项目目录

cd flutter_harmony_demo

3.3 验证项目结构

创建成功后，项目目录结构如下（重点关注 ohos 文件夹）：

flutter_harmony_demo/
├── lib/           # Flutter 核心业务代码（一套代码多端复用）
├── android/       # Android 原生工程（自动生成，无需修改）
├── ios/           # iOS 原生工程（自动生成，无需修改）
├── ohos/          # 鸿蒙原生工程（DevEco 仅打开此目录）
└── pubspec.yaml   # 项目依赖配置文件（管理三方库）

四、引入跨平台三方库

本文选用 3 个最常用的跨平台三方库，均已兼容鸿蒙 SDK 20+，无需额外适配，直接引入即可使用。

4.1 编辑 pubspec.yaml 配置文件

打开 Flutter 项目根目录的 pubspec\.yaml 文件，在 dependencies 节点下添加三方库，保留系统默认的 cupertino\_icons（无需删除，不影响鸿蒙运行）：

dependencies:
  flutter:
    sdk: flutter

  # 系统自带 iOS 风格图标库（保留即可，兼容鸿蒙，不影响运行）
  cupertino_icons: ^1.0.8

  # 三方库1：跨平台本地持久化存储（支持 Android/iOS/鸿蒙）
  shared_preferences: ^2.5.1
  # 三方库2：全局轻量消息提示框（三端样式统一）
  fluttertoast: ^8.2.12
  # 三方库3：网络请求框架（支持各类 HTTP 请求，适配鸿蒙网络权限）
  dio: ^5.8.0+1

4.2 安装三方库

保存 pubspec\.yaml 文件后，在终端执行以下命令，安装三方库：

flutter pub get

执行成功后，终端会显示 Got dependencies\!，代表三方库已全部安装完成，无兼容性问题。

五、编写 Flutter 核心业务代码

打开 lib/main\.dart 文件，全量替换为以下代码（带详细注释，可直接复制运行），实现本地存储、网络请求、消息提示三大核心功能：

import 'package:flutter/material.dart';
// 引入本地存储三方库
import 'package:shared_preferences/shared_preferences.dart';
// 引入提示框三方库
import 'package:fluttertoast/fluttertoast.dart';
// 引入网络请求三方库
import 'package:dio/dio.dart';

// 程序主入口
void main() {
  // 启动 Flutter 应用
  runApp(const MyApp());
}

// 根组件（无状态组件，负责应用整体配置）
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter + 三方库 + 鸿蒙 跨平台Demo',
      // 应用主题色（三端统一）
      theme: ThemeData(primarySwatch: Colors.blue),
      // 关闭调试模式标签（发布时可保留，开发时建议关闭）
      debugShowCheckedModeBanner: false,
      // 应用首页
      home: const HomePage(),
    );
  }
}

// 首页组件（有状态组件，处理业务逻辑与页面交互）
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 文本输入控制器：获取用户输入的内容（用于本地存储）
  final TextEditingController _textController = TextEditingController();
  // 存储网络请求返回的数据（用于页面展示）
  String _networkData = "点击按钮请求网络数据";

  // ====================== 1. 本地存储功能（shared_preferences）======================
  // 保存用户输入的内容到本地（跨平台兼容：Android/iOS/鸿蒙）
  _saveLocalData() async {
    // 初始化本地存储实例
    final prefs = await SharedPreferences.getInstance();
    // 存入数据：key为"storage_data"，value为用户输入的文本
    await prefs.setString("storage_data", _textController.text);
    // 弹出提示框，告知用户保存成功
    Fluttertoast.showToast(
      msg: "数据保存成功（跨平台本地存储）",
      toastLength: Toast.LENGTH_SHORT, // 提示时长
      gravity: ToastGravity.BOTTOM,    // 提示位置（底部）
    );
  }

  // 从本地读取已保存的数据
  _getLocalData() async {
    final prefs = await SharedPreferences.getInstance();
    // 根据key读取数据，返回值可能为null（需判断）
    String? data = prefs.getString("storage_data");
    if (data != null && data.isNotEmpty) {
      // 有数据：弹出提示，显示读取到的内容
      Fluttertoast.showToast(msg: "读取到数据：$data");
    } else {
      // 无数据：提示用户暂无存储内容
      Fluttertoast.showToast(msg: "暂无存储数据");
    }
  }

  // ====================== 2. 网络请求功能（dio）======================
  _requestNetworkData() async {
    try {
      // 创建 Dio 实例（用于发起网络请求）
      Dio dio = Dio();
      // 发起 GET 请求（公共免费接口，用于获取随机文本，无需注册）
      final response = await dio.get("https://api.vvhan.com/api/text/tx");
      // 更新页面状态，展示网络请求到的数据
      setState(() {
        _networkData = response.data.toString();
      });
      // 请求成功提示
      Fluttertoast.showToast(msg: "网络请求成功");
    } catch (e) {
      // 请求失败提示（捕获异常，避免应用崩溃）
      Fluttertoast.showToast(msg: "请求失败：$e");
    }
  }

  // 构建页面布局
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 页面顶部导航栏
      appBar: AppBar(
        title: const Text("Flutter + 三方库 + 鸿蒙 跨平台案例"),
        centerTitle: true, // 标题居中
      ),
      // 页面主体（可滚动，避免键盘遮挡）
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20), // 全局内边距
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch, // 子组件横向填满
          children: [
            const SizedBox(height: 20),

            // 本地存储功能区域
            const Text(
              "1. 跨平台本地存储（shared_preferences）",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 10),
            // 文本输入框：用户输入要保存的内容
            TextField(
              controller: _textController,
              decoration: const InputDecoration(
                border: OutlineInputBorder(), // 输入框边框
                hintText: "请输入要保存的内容",   // 提示文本
              ),
            ),
            const SizedBox(height: 10),
            // 保存按钮
            ElevatedButton(
              onPressed: _saveLocalData, // 点击触发保存功能
              child: const Text("保存到本地"),
            ),
            const SizedBox(height: 5),
            // 读取按钮
            ElevatedButton(
              onPressed: _getLocalData, // 点击触发读取功能
              child: const Text("读取本地数据"),
            ),

            const SizedBox(height: 40),

            // 网络请求功能区域
            const Text(
              "2. 跨平台网络请求（dio）",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 10),
            // 请求按钮
            ElevatedButton(
              onPressed: _requestNetworkData, // 点击触发网络请求
              child: const Text("请求网络数据"),
            ),
            const SizedBox(height: 15),
            // 网络数据展示区域
            Text(
              _networkData,
              style: const TextStyle(fontSize: 16, color: Colors.grey[800]),
              textAlign: TextAlign.center, // 文本居中
            ),

            const SizedBox(height: 40),

            // 平台提示区域
            const Center(
              child: Text(
                "✅ 一套代码运行：Android / iOS / 鸿蒙（HarmonyOS）",
                style: TextStyle(color: Colors.blue, fontSize: 16),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

六、鸿蒙工程配置（关键步骤，适配 SDK 20）

鸿蒙工程需配置 SDK 版本、网络权限，确保与 Flutter 代码、模拟器版本兼容，步骤如下：

6.1 用 DevEco Studio 打开鸿蒙工程

打开 DevEco Studio 6.0.0+，选择“Open Project”，找到 Flutter 项目中的 ohos 文件夹（如：E:\FlutterOpenHarmony\flutter_harmony_demo\ohos），点击“打开”，等待工程自动同步。

6.2 配置鸿蒙 SDK 版本（适配 SDK 20）

打开鸿蒙工程中的 ohos/build\-profile\.json5 文件，修改 products 节点下的配置，确保 compatibleSdkVersion 和 targetSdkVersion 均为 6\.0\.0\(20\)（与你的模拟器版本完全匹配），完整配置如下：

{
  "app": {
    "signingConfigs": [],
    "products": [
      {
        "name": "default",
        "signingConfig": "default",
        "compatibleSdkVersion": "6.0.0(20)", // 最低兼容 SDK 20
        "runtimeOS": "HarmonyOS",            // 运行系统为鸿蒙
        "targetSdkVersion": "6.0.0(20)"      // 目标 SDK 版本（与模拟器一致）
      }
    ],
    "buildModeSet": [
      {
        "name": "debug"
      },
      {
        "name": "profile"
      },
      {
        "name": "release"
      }
    ]
  },
  "modules": [
    {
      "name": "entry",
      "srcPath": "./entry",
      "targets": [
        {
          "name": "default",
          "applyToProducts": [
            "default"
          ]
        }
      ]
    }
  ]
}

注意：不要修改其他配置，仅修改 compatibleSdkVersion 和 targetSdkVersion，确保与上述代码一致。

6.3 配置鸿蒙网络权限（必做）

由于项目使用 dio 发起网络请求，需给鸿蒙工程添加网络权限，否则会请求失败：

打开鸿蒙工程中的 ohos/entry/src/main/module\.json5 文件。
找到 requestPermissions 数组（若没有则新增），添加网络权限配置，完整代码如下：

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    // 新增/修改网络权限配置
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET" // 网络权限
      }
    ]
  }
}