现有Flutter项目支持鸿蒙-环境搭建

使用 Flutter SDK 3.22.0

SDK 安装

准备工作

1.安装 DevEco Studio NEXT IDE, 注意版本应该是 Next,当前最新的是 5.0.3

2.安装Git, 如果要同时适配安卓,需要安装Android Studio; 如果要适配ios,需要安装Xcode

Mac 安装(推荐)

环境变量配置

ini 复制代码
# Flutter Mirror
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# HarmonyOS SDK
export TOOL_HOME=/Applications/DevEco-Studio.app/Contents/
export DEVECO_SDK_HOME=$TOOL_HOME/sdk # command-line-tools/sdk
export PATH=$TOOL_HOME/tools/ohpm/bin:$PATH # command-line-tools/ohpm/bin
export PATH=$TOOL_HOME/tools/hvigor/bin:$PATH # command-line-tools/hvigor/bin
export PATH=$TOOL_HOME/tools/node/bin:$PATH # command-line-tools/tool/node/bin

Windows 安装

配置用户变量

ini 复制代码
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

PUB_HOSTED_URL=https://pub.flutter-io.cn

DEVECO_SDK_HOME=C:\Program Files\Huawei\DevEco Studio\sdk

JAVA_HOME=C:\Program Files\Huawei\DevEco Studio\jbr

配置环境变量

编辑 PATH,添加以下路径

makefile 复制代码
C:\Program Files\Huawei\DevEco Studio\tools\ohpm\bin

C:\Program Files\Huawei\DevEco Studio\tools\hvigor\bin

C:\Program Files\Huawei\DevEco Studio\tools\node

管理多个 Flutter 版本

如果在项目开发中,需要使用多个 Flutter 版本,可以考虑使用 fvm

  1. 安装 FVM

  2. 使用 fvm 官方 flutter 版本

    fvm install 3.22.0

  3. 安装自定义鸿蒙版本,进入 fvm/version 目录,通常位于用户目录下,如 ~/fvm/versions/3.22.0, 拷贝仓库并重命名为 custom_x.y.z的名字

bash 复制代码
git clone https://gitee.com/openharmony-sig/flutter_flutter.git custom_3.22.0
  1. 在项目中使用单独的 flutter sdk 版本, 在项目目录中执行:
perl 复制代码
fvm use custom_3.22.0

接下来使用 fvm list 命令查看 SDK版本 列表。

sql 复制代码
┌───────────────┬─────────┬─────────────────┬──────────────┬──────────────┬────────┬───────┐
│ Version       │ Channel │ Flutter Version │ Dart Version │ Release Date │ Global │ Local │
├───────────────┼─────────┼─────────────────┼──────────────┼──────────────┼────────┼───────┤
│ custom_3.22.0 │         │ Need setup      │              │              │        │       │
├───────────────┼─────────┼─────────────────┼──────────────┼──────────────┼────────┼───────┤
│ 3.22.0        │ stable  │ 3.22.0          │ 3.4.0        │ May 13, 2024 │ ●      │       │
└───────────────┴─────────┴─────────────────┴──────────────┴──────────────┴────────┴───────┘

可以看到,SDK中出现了两个版本,其中使用命令 fvm global 3.22.0 将 官方的3.22.0 设置成了全局默认版本。鸿蒙化的 SDK 需要配置安装,我们稍后进入项目,执行安装。

常见问题

  1. 运行 flutter doctor 出现 Error: Unable to find git in your PATH.

执行以下命令

csharp 复制代码
git config --global --add safe.directory '*'

项目配置

1.进入项目根目录,如果项目还未创建,则使用 flutter create 命令创建项目

lua 复制代码
flutter create my_app

2.在当前项目目录,设置使用的 Flutter SDK 版本

perl 复制代码
fvm use custom_3.22.0

此时会自动安装 sdk 版本,运行成功后如果再运行 fvm list, 可以看到 SDK 已经准备就绪。

sql 复制代码
┌───────────────┬─────────┬─────────────────┬──────────────┬──────────────┬────────┬───────┐
│ Version       │ Channel │ Flutter Version │ Dart Version │ Release Date │ Global │ Local │
├───────────────┼─────────┼─────────────────┼──────────────┼──────────────┼────────┼───────┤
│ custom_3.22.0 │         │ 3.22.0-ohos     │ 3.4.0        │              │        │       │
├───────────────┼─────────┼─────────────────┼──────────────┼──────────────┼────────┼───────┤

同时,配置命令执行完成后,将会在项目目录中创建 .fvm 目录,里面 flutter_sdk 会软连接到实际的 custom_3.22.0 SDK 目录。

查看 .vscode/settings.json 文件可以发现,自动创建了一条配置 flutter sdk 的项目:

json 复制代码
"dart.flutterSdkPath": ".fvm/versions/custom_3.22.0"

如果项目使用了 melos, 则需要在 melos.yaml 文件的底部,添加以下配置,使得 melos 可以使用自定义的 flutter sdk

bash 复制代码
sdkPath: .fvm/versions/custom_3.22.0

3.如果项目已经创建,还未添加鸿蒙平台支持,则使用以下命令添加鸿蒙平台支持。

lua 复制代码
flutter create --platforms ohos .

其中,.代表当前目录。

目录结构类似如下所示

lua 复制代码
├── README.md
├── analysis_options.yaml
├── assets
├── build
├── env
├── lib
│   ├── config
│   └── main.dart
├── melos_ohos_app.iml
├── ohos
│   ├── AppScope
│   ├── build-profile.json5
│   ├── entry
│   ├── har
│   ├── hvigor
│   ├── hvigorfile.ts
│   ├── local.properties
│   ├── oh-package-lock.json5
│   ├── oh-package.json5
│   └── oh_modules
├── pubspec.lock
├── pubspec.yaml
└── pubspec_overrides.yaml

创建命令执行成功后,项目中会出现 ohos目录,这里面存放的就是鸿蒙平台的相关代码。

签名

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

rust 复制代码
请通过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 出现相应的签名配置信息。

运行

运行 Flutter 项目,在项目根目录使用 fvm flutter run 或者在 IDE 中点击运行按钮

参考资料

  • FVM
  • 鸿蒙Flutter实战:01-搭建开发环境
  • 鸿蒙 Flutter 3.22.0
相关推荐
Jo乔戈里4 分钟前
ass字幕嵌入mp4带偏移
前端·python·算法
San309 分钟前
深入理解CSS常规流布局
前端·css
CodePencil9 分钟前
CSS专题之水平垂直居中
前端·css·html
技术小丁12 分钟前
使用 HTML + JavaScript 实现一个日历任务管理系统
前端·javascript
FE_C_P小麦13 分钟前
AI中国象棋双人游戏开发尝试:AI_Grok
前端·微信·微信小程序
xianshenglu14 分钟前
我的 Angular 总结:为 AgGridAngular 自定义单元格组件创建基类
前端·javascript·angular.js
麦兜*19 分钟前
node_modules\node-sass: Command failed.报错了
前端·css·sass
前端小巷子19 分钟前
JS中的 WeakSet 和 WeakMap
前端·javascript·面试
wifi歪f22 分钟前
如何实现一个请求库?【面试场景题】
前端
洛小豆44 分钟前
她问我:JWT里到底能塞多少东西?我说我不知道……
前端·后端·spring