使用最新的 Flutter SDK 3.22.1 构建 HarmonyOS 应用
使用最新的 Flutter SDK 3.22.1 构建 HarmonyOS 应用
大家都知道目前鸿蒙的开源 tpc 和 sig 仓都迁移到了 gitcode 平台了，本次更新对 Flutter SDK 也有所涉及，所以我们就用最新的 Flutter SDK 来一起看一下如何构建 HarmonyOS 应用
最新的仓库是
这个仓库里面有两个版本，一个是3.7版本，一个是3.22版本
所以大家需要哪个版本，就根据自己的情况就好
首先
下载 flutter_flutter
代码语言：javascript代码运行次数：0运行复制 git clone git@gitcode:openharmony-sig/flutter_flutter.git
或者
代码语言：javascript代码运行次数：0运行复制git clone .git
切换分支 3.22.0-ohos
然后切换
代码语言：javascript代码运行次数：0运行复制git checkout -b 3.22.0-ohos origin/3.22.0-ohos
配置环境变量
然后打开~/.bash_profile配置文件，更改目录。
代码语言：javascript代码运行次数：0运行复制open ~/.bash_profile
export PATH=/Users/jianguo/huawei/flutter/bin:$PATH
export PUB_HOSTED_URL=
export FLUTTER_STORAGE_BASE_URL=
export FLUTTER_GIT_URL=.git
刷新
代码语言：javascript代码运行次数：0运行复制source ~/.bash_profile
然后我们再去检查环境
代码语言：javascript代码运行次数：0运行复制jianguo@nutpi ~ % flutter --version
Flutter 3.22.1-ohos-0.1.1 • channel [user-branch] • git@gitcode:openharmony-sig/flutter_flutter.git
Framework • revision ff3e031966 (3 days ago) • 2025-04-07 10:25:16 +0800
Engine • revision f6344b75dc
Tools • Dart 3.4.0 • DevTools 2.34.1
jianguo@nutpi ~ %
现在我们就可以看到的是3.22啦
项目配置
1.进入项目根目录，如果项目尚未创建，则使用flutter create命令创建项目
flutter create my_app
assets chapter11 chapter15 chapter5 chapter9 styles
jianguo@jianguodeMacBook-Pro-2 gitbook_flutter % flutter create my_app
Flutter assets will be downloaded from . Make sure you trust this source!
Downloading Material fonts... 1,271ms
Downloading Gradle Wrapper... 28ms
Downloading package sky_engine... 635ms
Downloading flutter_patched_sdk tools... 301ms
Downloading flutter_patched_sdk_product tools... 152ms
Downloading darwin-arm64 tools... 909ms
Downloading libimobiledevice... 28ms
Downloading usbmuxd... 26ms
Downloading libplist... 27ms
Downloading openssl... 84ms
Downloading ios-deploy... 31ms
Downloading darwin-arm64/font-subset tools... 115ms
Developer identity "Apple Development: Shu Shu (669W3557MK)" selected for iOS code signing
Creating project my_app...
Resolving dependencies in `my_app`...
Downloading packages...
Got dependencies in `my_app`.
Wrote 161 files.
All done!
You can find general documentation for Flutter at: /
Detailed API documentation is available at: /
If you prefer video documentation, consider:
In order to run your application, type:
$ cd my_app
$ flutter run
Your application code is in my_app/lib/main.dart.
2.如果项目已经创建，已经添加鸿蒙平台支持，则使用以下命令添加鸿蒙平台支持。有的话，就不用执行下面的命令。
代码语言：javascript代码运行次数：0运行复制flutter create --platforms ohos .
其中，.代表当前目录。
目录结构类似如下所示
代码语言：javascript代码运行次数：0运行复制jianguo@nutpi 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
├── 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
│ │ ├── generated_plugin_registrant.h
│ │ └── generated_plugins.cmake
│ ├── main
│ ├── my_application
│ └── 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-profile.json5
│ │ ├── hvigorfile.ts
│ │ ├── oh-package.json5
│ │ └── src
│ ├── hvigor
│ │ └── hvigor-config.json5
│ ├── hvigorfile.ts
│ ├── local.properties
│ └── oh-package.json5
├── 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
│ ├── 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
46 directories, 79 files
jianguo@nutpi my_app %
ohos目录，这里面存放的就是鸿蒙平台的相关代码。
代表
1.在运行项目之前，先对项目进行签名，否则在运行过程中会出现这样的错误
图像-20250410094436357
代码语言：javascript代码运行次数：0运行复制请通过DevEco Studio打开ohos工程后配置调试签名(File -> Project Structure -> Signing Configs 勾选Automatically generate signature)
图像-20241105103358856
图像-20250410093739323
2.用DevEco打开上面的ohos目录，注意不是项目目录，是项目下面的ohos鸿蒙目录，然后根据提示依次打开File -> Project Structure -> Signing Configs，点击自动签名即可。
3.签名成功后，文件ohos/build-profile.json5会自动更新，里面的字段signingConfigs出现相应的签名配置信息。
运行
使用 Flutter Run
代码语言：javascript代码运行次数：0运行复制jianguo@nutpi my_app % hdc tconn 192.168.1.16:41667
Connect OK
jianguo@nutpi my_app % flutter run
Connected devices:
127.0.0.1:5555 (mobile) • 127.0.0.1:5555 • ohos-arm64 • Ohos OpenHarmony-5.0.4.150 (API 16)
192.168.1.16:41667 (mobile) • 192.168.1.16:41667 • ohos-arm64 • Ohos OpenHarmony-5.0.4.150 (API 16)
macOS (desktop) • macos • darwin-arm64 • macOS 13.4.1 22F82 darwin-arm64
Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 13.4.1 22F82 darwin-arm64
Chrome (web) • chrome • web-javascript • Google Chrome 135.0.7049.42
No wireless devices were found.
(127.0.0.1:5555)
(192.168.1.16:41667)
(macos)
Designed for iPad (mac-designed-for-ipad)
(chrome)
Please choose one (or "q" to quit): 2
Launching lib/main.dart on 192.168.1.16:41667 in debug mode...
start hap build...
Running Hvigor task assembleHap... 14.1s
✓ Built ohos/entry/build/default/outputs/default/entry-default-signed.hap.
图像-20241105103741912
等待就可以。
flutter_01
这不是出来了，赞赞赞。
代码语言：javascript代码运行次数：0运行复制 flutter run --debug -d 9CN0223901000559
╔════════════════════════════════════════════════════════════════════════════╗
║ Welcome to Flutter! - ║
║ ║
║ 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: ║
║ /docs/reference/crash-reporting ║
║ ║
║ See Google's privacy policy: ║
║ ║
║ ║
║ To disable animations in this tool, use ║
║ 'flutter config --no-cli-animations'. ║
╚════════════════════════════════════════════════════════════════════════════╝
Launching lib/main.dart on 9CN0223901000559 in debug mode...
start hap build...
Running Hvigor task assembleHap... 12.8s
✓ Built ohos/entry/build/default/outputs/default/entry-default-signed.hap.
installing hap. bundleName: com.example.my_app
在模拟器上运行时闪退，不知道大家知道什么原因不？
图像-20250410094927223
Flutter 医生-v
代码语言：javascript代码运行次数：0运行复制jianguo@nutpi ~ % flutter doctor -v
[!] Flutter (Channel [user-branch], 3.22.1-ohos-0.1.1, on macOS 13.4.1 22F82 darwin-arm64, locale zh-Hans-CN)
! Flutter version 3.22.1-ohos-0.1.1 on channel [user-branch] at /Users/jianguo/huawei/flutter
Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
If that doesn't fix the issue, reinstall Flutter by following instructions at /docs/get-started/install.
! Upstream repository git@gitcode:openharmony-sig/flutter_flutter.git is not the same as FLUTTER_GIT_URL
• FLUTTER_GIT_URL = .git
• Framework revision ff3e031966 (3 days ago), 2025-04-07 10:25:16 +0800
• Engine revision f6344b75dc
• Dart version 3.4.0
• DevTools version 2.34.1
• Pub download mirror
• Flutter download mirror
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[✓] HarmonyOS toolchain - develop for HarmonyOS devices
• OpenHarmony Sdk at /Users/jianguo/Library/OpenHarmony/Sdk, available api versions has [15:15, 14:14, 12:12]
• Ohpm version 5.0.13
• Node version v22.14.0
• Hvigorw binary at /Applications/DevEco-Studio.app/Contents/tools/hvigor/bin/hvigorw
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/jianguo/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• ANDROID_HOME = /Users/jianguo/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
• All Android licenses accepted.
[!] Xcode - develop for iOS and macOS (Xcode 14.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E300c
! Flutter recommends a minimum Xcode version of 15.
Download the latest version or update via the Mac App Store.
• CocoaPods version 1.16.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from: