使用鸿蒙版Flutter3.27.4构建鸿蒙应用
2025-05-23 18:54:17
138次阅读
0个评论
使用鸿蒙版Flutter3.27.4构建鸿蒙应用
前言
随着鸿蒙系统的不断发展，越来越多的开发者开始关注如何使用 Flutter 来构建鸿蒙应用。本文将详细介绍如何使用鸿蒙版 Flutter 3.27.4 来构建鸿蒙应用，帮助大家快速上手。
一、环境准备
1.1 安装 FVM
FVM（Flutter Version Management）是一个 Flutter SDK 版本管理工具，它可以帮助我们轻松地管理和切换不同版本的 Flutter SDK。
1.2 检查 FVM 目录
安装好 FVM 后，需要检查是否存在 /Users/jianguo/fvm/versions 这个目录。如果不存在，则创建该目录：
大家需要先安装好FVM然后查看是否有fvm/versions这个目录
没有目录则创建。
mkdir /Users/jianguo/fvm/versions
二、配置 Flutter 3.27.4
2.1 克隆 Flutter 3.27.4 仓库
使用以下命令克隆 Flutter 3.27.4 的仓库到本地
git clone --branch oh-3.27.4-dev git@gitcode.com:openharmony-sig/flutter_flutter.git custom_3.27.4
2.2 查看 Flutter 版本
克隆完成后，使用 fvm list 命令查看已安装的 Flutter 版本：
fvm list
Cache directory: /Users/jianguo/fvm/versions
Directory Size: 4.36 GB
┌───────────────┬─────────┬───────────────────┬──────────────┬──────────────┬────────┬───────┐
│ Version │ Channel │ Flutter Version │ Dart Version │ Release Date │ Global │ Local │
├───────────────┼─────────┼───────────────────┼──────────────┼──────────────┼────────┼───────┤
│ custom_3.27.4 │ │ Need setup │ │ │ │ │
├───────────────┼─────────┼───────────────────┼──────────────┼──────────────┼────────┼───────┤
│ custom_3.22.1 │ │ 3.22.1-ohos-1.0.0 │ 3.4.0 │ │ │ │
└───────────────┴─────────┴───────────────────┴──────────────┴──────────────┴────────┴───────┘
jianguo@nutpi versions %
下载完sdk后
2.3 使用 Flutter 3.27.4
使用以下命令切换到 Flutter 3.27.4 版本：
fvm use custom_3.27.4，这样的话，重新运行fvm list的时候，就如下面所示。
fvm list
Cache directory: /Users/jianguo/fvm/versions
Directory Size: 9.98 GB
┌───────────────┬─────────┬───────────────────┬──────────────┬──────────────┬────────┬───────┐
│ Version │ Channel │ Flutter Version │ Dart Version │ Release Date │ Global │ Local │
├───────────────┼─────────┼───────────────────┼──────────────┼──────────────┼────────┼───────┤
│ custom_3.27.4 │ │ 3.27.4-ohos-0.0.1 │ 3.6.2 │ │ │ ● │
├───────────────┼─────────┼───────────────────┼──────────────┼──────────────┼────────┼───────┤
│ custom_3.22.1 │ │ 3.22.1-ohos-1.0.0 │ 3.4.0 │ │ │ │
├───────────────┼─────────┼───────────────────┼──────────────┼──────────────┼────────┼───────┤
│ .fvm │ │ │ │ │ │ │
└───────────────┴─────────┴───────────────────┴──────────────┴──────────────┴────────┴───────┘
jianguo@nutpi versions % open .
三、创建项目
3.1 使用自定义 SDK 创建项目
在项目目录下，先使用以下命令指定使用自定义的 Flutter SDK：
fvm use custom_3.27.4
然后，使用以下命令创建 Flutter 项目：
fvm flutter create --platforms=ohos --project-name ohosdemo .
或者：
fvm flutter create fvmdemo
执行上述命令后，会在控制台看到 Flutter 创建项目的相关输出信息，如下载资源、创建项目结构等。
jianguo@jianguodeMacBook-Pro-2 my_app % tree -L 3
.
├── README.md
├── analysis_options.yaml
├── android
│ ├── app
│ │ ├── build.gradle
│ │ └── src
│ ├── build.gradle
│ ├── gradle
│ │ └── wrapper
│ ├── gradle.properties
│ ├── gradlew
│ ├── gradlew.bat
│ ├── local.properties
│ ├── my_app_android.iml
│ └── settings.gradle
├── build
│ ├── 11ee55180268f2469c49c88e2119b930
│ │ ├── _composite.stamp
│ │ ├── gen_dart_plugin_registrant.stamp
│ │ └── gen_localizations.stamp
│ └── ohos
│ └── flutter_assets
├── ios
│ ├── Flutter
│ │ ├── AppFrameworkInfo.plist
│ │ ├── Debug.xcconfig
│ │ ├── Generated.xcconfig
│ │ ├── Release.xcconfig
│ │ └── flutter_export_environment.sh
│ ├── Runner
│ │ ├── AppDelegate.swift
│ │ ├── Assets.xcassets
│ │ ├── Base.lproj
│ │ ├── GeneratedPluginRegistrant.h
│ │ ├── GeneratedPluginRegistrant.m
│ │ ├── Info.plist
│ │ └── Runner-Bridging-Header.h
│ ├── Runner.xcodeproj
│ │ ├── project.pbxproj
│ │ ├── project.xcworkspace
│ │ └── xcshareddata
│ ├── Runner.xcworkspace
│ │ ├── contents.xcworkspacedata
│ │ └── xcshareddata
│ └── RunnerTests
│ └── RunnerTests.swift
├── lib
│ └── main.dart
├── linux
│ ├── CMakeLists.txt
│ ├── flutter
│ │ ├── CMakeLists.txt
│ │ ├── generated_plugin_registrant.cc
│ │ ├── generated_plugin_registrant.h
│ │ └── generated_plugins.cmake
│ ├── main.cc
│ ├── my_application.cc
│ └── my_application.h
├── macos
│ ├── Flutter
│ │ ├── Flutter-Debug.xcconfig
│ │ ├── Flutter-Release.xcconfig
│ │ ├── GeneratedPluginRegistrant.swift
│ │ └── ephemeral
│ ├── Runner
│ │ ├── AppDelegate.swift
│ │ ├── Assets.xcassets
│ │ ├── Base.lproj
│ │ ├── Configs
│ │ ├── DebugProfile.entitlements
│ │ ├── Info.plist
│ │ ├── MainFlutterWindow.swift
│ │ └── Release.entitlements
│ ├── Runner.xcodeproj
│ │ ├── project.pbxproj
│ │ ├── project.xcworkspace
│ │ └── xcshareddata
│ ├── Runner.xcworkspace
│ │ ├── contents.xcworkspacedata
│ │ └── xcshareddata
│ └── RunnerTests
│ └── RunnerTests.swift
├── my_app.iml
├── ohos
│ ├── AppScope
│ │ ├── app.json5
│ │ └── resources
│ ├── build-profile.json5
│ ├── entry
│ │ ├── build
│ │ ├── build-profile.json5
│ │ ├── hvigorfile.ts
│ │ ├── oh-package.json5
│ │ └── src
│ ├── har
│ │ └── flutter.har
│ ├── hvigor
│ │ └── hvigor-config.json5
│ ├── hvigorfile.ts
│ ├── local.properties
│ ├── oh-package-lock.json5
│ ├── oh-package.json5
│ └── oh_modules
│ └── @ohos
├── pubspec.lock
├── pubspec.yaml
├── test
│ └── widget_test.dart
├── web
│ ├── favicon.png
│ ├── icons
│ │ ├── Icon-192.png
│ │ ├── Icon-512.png
│ │ ├── Icon-maskable-192.png
│ │ └── Icon-maskable-512.png
│ ├── index.html
│ └── manifest.json
└── windows
├── CMakeLists.txt
├── flutter
│ ├── CMakeLists.txt
│ ├── generated_plugin_registrant.cc
│ ├── generated_plugin_registrant.h
│ └── generated_plugins.cmake
└── runner
├── CMakeLists.txt
├── Runner.rc
├── flutter_window.cpp
├── flutter_window.h
├── main.cpp
├── resource.h
├── resources
├── runner.exe.manifest
├── utils.cpp
├── utils.h
├── win32_window.cpp
└── win32_window.h
54 directories, 84 files
会在控制台看到：
fvm flutter create fvmdemo
[WARN] Not checking for version mismatch as custom version is being used.
╔════════════════════════════════════════════════════════════════════════════╗
║ Welcome to Flutter! - https://flutter.dev ║
║ ║
║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
║ statistics and basic crash reports. This data is used to help improve ║
║ Flutter tools over time. ║
║ ║
║ Flutter tool analytics are not sent on the very first run. To disable ║
║ reporting, type 'flutter config --no-analytics'. To display the current ║
║ setting, type 'flutter config'. If you opt out of analytics, an opt-out ║
║ event will be sent, and then no further information will be sent by the ║
║ Flutter tool. ║
║ ║
║ By downloading the Flutter SDK, you agree to the Google Terms of Service. ║
║ The Google Privacy Policy describes how data is handled in this service. ║
║ ║
║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and ║
║ crash reports to Google. ║
║ ║
║ Read about data we send with crash reports: ║
║ https://flutter.dev/to/crash-reporting ║
║ ║
║ See Google's privacy policy: ║
║ https://policies.google.com/privacy ║
║ ║
║ To disable animations in this tool, use ║
║ 'flutter config --no-cli-animations'. ║
╚════════════════════════════════════════════════════════════════════════════╝
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Downloading Material fonts... 817ms
Downloading Gradle Wrapper... 28ms
Downloading package sky_engine... 422ms
Downloading package flutter_gpu... 37ms
Downloading flutter_patched_sdk tools... 425ms
Downloading flutter_patched_sdk_product tools... 952ms
Downloading darwin-arm64 tools... 4.8s
Downloading libimobiledevice... 43ms
Downloading usbmuxd... 26ms
Downloading libplist... 27ms
Downloading openssl... 204ms
Downloading ios-deploy... 43ms
Downloading darwin-arm64/font-subset tools... 283ms
Creating project fvmdemo...
Resolving dependencies in `fvmdemo`...
Downloading packages...
Got dependencies in `fvmdemo`.
Wrote 162 files.
All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev
In order to run your application, type:
$ cd fvmdemo
$ flutter run
Your application code is in fvmdemo/lib/main.dart.
执行
tree -L 2 .fvm
四、IDE / 编辑器配置
4.1 VSCode 配置
在项目目录下的 .vscode/settings.json 文件中配置 Flutter SDK 的路径：
创建以后, 目录中会出现 .fvm(软链接到 SDK 实际位置) 和 .fvmrc(配置文件)
tree -L 2 .fvm
执行 tree -L 2 .fvm (仅参考)
.fvm
├── flutter_sdk -> /Users/jianguo/fvm/versions/custom_3.27.4
├── fvm_config.json
├── release
├── version
└── versions
└── custom_3.27.4 -> /Users/jianguo/fvm/versions/custom_3.27.4
4 directories, 3 files
可发现, 其中 .fvm/flutter_sdk 和 .fvm/versions 下的文件均软链接到 SDK 实际缓存位置, 复用
在项目目录下的 .vscode/settings.json 里配置 SDK 位置即可，示例如下
{
"dart.flutterSdkPath": ".fvm/versions/custom_3.27.4", # 也可以是 `.fvm/flutter_sdk`
"dart.addSdkToTerminalPath": true, # 表示将当前 SDK 添加到 VSCode 集成终端的 PATH
"dart.env": {
"PUB_HOSTED_URL": "https://pub.flutter-io.cn" # 根据情况设置(国内推荐)
},
}
五、签名配置
5.1 签名的重要性
在运行项目前，必须对项目进行签名，否则在运行过程中会出现错误。可以通过 DevEco Studio 打开 ohos 工程后配置调试签名。
5.2 使用 DevEco Studio 配置签名
用 DevEco 打开项目下的 ohos 目录，然后依次点击 File -> Project Structure -> Signing Configs，勾选 “Automatically generate signature” 选项，点击自动签名即可。
5.3 签名成功后的变化
签名成功后，ohos/build-profile.json5 文件会自动更新，其中的 signingConfigs 字段会出现相应的签名配置信息。
1.在运行项目前，先对项目进行签名，否则在运行过程中会出现这样的错误
请通过DevEco Studio打开ohos工程后配置调试签名(File -> Project Structure -> Signing Configs 勾选Automatically generate signature)
2.用 DevEco 打开上面的 ohos 目录，注意不是项目目录，是项目下面的 ohos 鸿蒙目录，然后根据提示依次打开 File -> Project Structure -> Signing Configs, 点击自动签名即可。
3.签名成功后，文件 ohos/build-profile.json5 会自动更新，里面的字段 signingConfigs 出现相应的签名配置信息。
六、运行项目
6.1 真机运行
使用 flutter run 命令即可在真机上运行项目。
| 真机 | PC模拟器 | 手机模拟器 | |
|---|---|---|---|
 |
 |
 |
6.2 模拟器运行
在模拟器上运行时，可能会遇到以下错误：
Error connecting to the service protocol: failed to connect to http://127.0.0.1:57827/Zj4TvmhQT38=/ HttpException: Connection closed before full header was received, uri = http://127.0.0.1:57827/Zj4TvmhQT38=/ws
遇到这种情况，可以尝试注释掉 main.dart 文件中的浮动按钮代码：
七、FAQ
7.1 模拟器运行出错
如果在模拟器上运行时出现连接服务协议错误，可以参考上述方法注释掉相关的浮动按钮代码，然后重新运行项目。
八、总结
通过本文的介绍，相信大家已经掌握了使用鸿蒙版 Flutter 3.27.4 构建鸿蒙应用的方法。从环境准备、配置 Flutter 版本、创建项目、IDE 配置、签名配置到运行项目，每一步都有详细的说明。在实际开发过程中，如果遇到问题，可以参考 FAQ 部分或者查阅相关文档。希望大家能够顺利构建出优秀的鸿蒙应用
坚果派
坚果派由坚果等人创建，团队拥有若干华为HDE，以及若干其他领域的三十余位万粉博主运营。专注于分享的技术包括HarmonyOS/OpenHarmony，ArkUI-X，元服务，服务卡片，华为自研语言，BlueOS操作系统、团队成员聚集在北京、上海、广州、深圳、南京、杭州、苏州、宁夏等地。 聚焦“鸿蒙原生应用”、“智能物联”和“AI赋能”、“人工智能”四大业务领域，依托华为开发者专家等强大的技术团队，以及涵盖需求、开发、测试、运维于一体的综合服务体系，赋能文旅、媒体、社交、家居、消费电子等行业客户，满足社区客户数字化升级转型的需求，帮助客户实现价值提升。 目前上架鸿蒙原生应用40款，三方库72个。
11
相关话题
- 使用 Flutter SDK 3.22.1构建HarmonyOS应用
- 鸿蒙版Flutter高效使用 Packages指南
- 使用最新的 Flutter SDK 3.22.1构建HarmonyOS应用
- 鸿蒙版 Flutter 升级 ohos 构建过程：支持依赖插件源码构建
- 鸿蒙版Flutter开发相关
- 鸿蒙版Flutter环境搭建
- 鸿蒙Flutter实战：11-使用 Flutter SDK 3.22.0
- 鸿蒙Flutter实战：06-使用ArkTs开发Flutter鸿蒙插件
- Flutter 鸿蒙化 使用 Flutter Channel实现和Flutter和HarmonyOS交互
- 鸿蒙版Flutter环境配置Windows 版本
- 鸿蒙版Flutter快递查询助手
- 鸿蒙版Flutter快递查询助手
- 鸿蒙版Flutter环境配置Windows 版本
- 鸿蒙版Flutter实现发送短信的功能
- Flutter鸿蒙化 在鸿蒙应用中添加Flutter页面