使用最新的 Flutter SDK 3.22.1构建HarmonyOS应用

2025-04-10 10:17:33
214次阅读
1个评论

使用最新的 Flutter SDK 3.22.1构建HarmonyOS应用

大家都知道目前开源鸿蒙的tpc和sig仓都迁移到gitcode平台了,本次更新对 Flutter SDK 也有所涉及,所以我们就用最新的Flutter SDK 来一起看一下如何构建HarmonyOS应用

最新的仓库是https://gitcode.com/openharmony-sig/flutter_flutter

这仓库里面有两个版本,一个是3.7版本,一个是3.22版本

所以大家需要哪个版本,就根据自己的情况就好

首先

下载flutter_flutter

 git clone git@gitcode.com:openharmony-sig/flutter_flutter.git

或者

git clone https://gitcode.com/openharmony-sig/flutter_flutter.git

切换分支3.22.0-ohos

然后切换分支

git checkout -b 3.22.0-ohos origin/3.22.0-ohos

配置环境变量

然后打开~/.bash_profile配置文件,更改目录。

open ~/.bash_profile
export PATH=/Users/jianguo/huawei/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export FLUTTER_GIT_URL=https://gitcode.com/openharmony-sig/flutter_flutter.git

刷新

source ~/.bash_profile

然后我们再去检查环境

jianguo@nutpi ~ % flutter --version
Flutter 3.22.1-ohos-0.1.1 • channel [user-branch] • git@gitcode.com: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 https://storage.flutter-io.cn. 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: 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 my_app
  $ flutter run

Your application code is in my_app/lib/main.dart.

2.如果项目已经创建,还未添加鸿蒙平台支持,则使用以下命令添加鸿蒙平台支持。有的话,就不用执行下面的命令。

flutter create --platforms ohos .

其中,.代表当前目录。

目录结构类似如下所示

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.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-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.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

46 directories, 79 files
jianguo@nutpi my_app % 

ohos目录,这里面存放的就是鸿蒙平台的相关代码。

签名

1.在运行项目前,先对项目进行签名,否则在运行过程中会出现这样的错误

image-20250410094436357

请通过DevEco Studio打开ohos工程后配置调试签名(File -> Project Structure -> Signing Configs 勾选Automatically generate signature)

image-20241105103358856

image-20250410093739323

2.用 DevEco 打开上面的 ohos 目录,注意不是项目目录,是项目下面的 ohos 鸿蒙目录,然后根据提示依次打开 File -> Project Structure -> Signing Configs, 点击自动签名即可。

3.签名成功后,文件 ohos/build-profile.json5 会自动更新,里面的字段 signingConfigs 出现相应的签名配置信息。

运行

我们使用flutter run

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.

[1]: 127.0.0.1:5555 (127.0.0.1:5555)
[2]: 192.168.1.16:41667 (192.168.1.16:41667)
[3]: macOS (macos)
[4]: Mac Designed for iPad (mac-designed-for-ipad)
[5]: Chrome (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.

image-20241105103741912

等待就可。

flutter_01

这不是出来了,赞赞赞。

 flutter run --debug -d 9CN0223901000559

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 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/docs/reference/crash-reporting                         ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://policies.google.com/privacy                                        ║
  ║                                                                            ║
  ║ 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 


在模拟器上运行闪退,不知道大家知道什么原因不?

image-20250410094927223

flutter doctor -v

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 https://flutter.dev/docs/get-started/install.
    ! Upstream repository git@gitcode.com:openharmony-sig/flutter_flutter.git is not the same as FLUTTER_GIT_URL
    • FLUTTER_GIT_URL = https://gitcode.com/openharmony-sig/flutter_flutter.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 https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn
    • 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:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)

[✓] VS Code (version 1.98.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.106.0

[✓] Connected device (5 available)
    • 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

Attempting to reach github.com...⣯

Flutter命令

指令名称 指令描述 使用说明
doctor 环境检测 flutter doctor
config 环境配置 flutter config --
create 创建新项目 flutter create --platforms ohos,android,ios --org
create 创建module模板 flutter create -t module <module_name>
create 创建plugin模板 flutter create -t plugin --platforms ohos,android,ios <plugin_name>
create 创建plugin_ffi模板 flutter create -t plugin_ffi --platforms ohos,android,ios <plugin_name>
devices 查找已连接设备 flutter devices
install 应用安装 flutter install -d <hap文件路径>
assemble 资源打包 flutter assemble
build 测试应用构建 flutter build hap --debug [--target-platform ohos-arm64]
build 正式应用构建 flutter build hap --release [--target-platform ohos-arm64]
run 应用运行 flutter run
attach 调试模式 flutter attach
screenshot 截屏 flutter screenshot
pub 获取依赖 flutter pub get
clean 清除项目依赖 flutter clean
cache 清除全局缓存数据 flutter pub cache clean

flutter三方库适配进度

具体可查看

https://gitcode.com/openharmony-sig/flutter_packages#openharmony%E5%B9%B3%E5%8F%B0%E5%B7%B2%E5%85%BC%E5%AE%B9%E5%BA%93

坚果派

坚果派由坚果等热联合创建,若干其他领域的三十余位万粉博主运营。专注于分享的技术包括HarmonyOS/OpenHarmony,ArkUI-X,元服务,AI,仓颉,BlueOS操作系统、团队成员聚集在北京、上海、广州、深圳、南京、杭州、苏州、宁夏等地。 聚焦“鸿蒙原生应用”、“智能物联”和“AI赋能”、“人工智能”四大业务领域,依托华为开发者专家等强大的技术团队,以及涵盖需求、开发、测试、运维于一体的综合服务体系,赋能文旅、媒体、社交、家居、消费电子等行业客户,满足社区客户数字化升级转型的需求,帮助客户实现价值提升。 目前上架鸿蒙原生应用18款,三方库56个。

地址:

https://www.nutpi.net/

https://atomgit.com/nutpi

https://gitcode.com/nutpi

收藏00
    2025-04-12 08:05:53

    你好,我在Windows环境下会遇到[!] No Hmos SDK found. Try setting the HOS_SDK_HOME environment variable.的问题,但是我已经在环境变量中配置了HOS_SDK_HOME=D:\Application\DevEco Studio\sdk

登录 后评论。没有帐号? 注册 一个。