鸿蒙Flutter实战:11-使用 Flutter SDK 3.22.0

使用 Flutter SDK 3.22.0

SDK 安装

参考[鸿蒙Flutter实战:01-搭建开发环境]文章的说明,首先安装 Flutter SDK 3.22.0。

目前鸿蒙化Flutter SDK 3.22 还未正式发布,现在可以使用 https://gitee.com/harmonycommando_flutter/flutter 进行前期测试验证。

使用 FVM 进入 目录 ~/fvm/versions/, 克隆以上仓库。

1git clone https://gitee.com/openharmony-sig/flutter_flutter.git custom_3.22.0

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

1┌───────────────┬─────────┬─────────────────┬──────────────┬──────────────┬────────┬───────┐ 2│ Version │ Channel │ Flutter Version │ Dart Version │ Release Date │ Global │ Local │ 3├───────────────┼─────────┼─────────────────┼──────────────┼──────────────┼────────┼───────┤ 4│ custom_3.22.0 │ │ Need setup │ │ │ │ │ 5├───────────────┼─────────┼─────────────────┼──────────────┼──────────────┼────────┼───────┤ 63.22.0 │ stable │ 3.22.0 │ 3.4.0 │ May 13, 2024 │ ● │ │ 7└───────────────┴─────────┴─────────────────┴──────────────┴──────────────┴────────┴───────┘

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

项目配置

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

1flutter create my_app

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

1fvm use custom_3.22.0

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

1┌───────────────┬─────────┬─────────────────┬──────────────┬──────────────┬────────┬───────┐ 2│ Version │ Channel │ Flutter Version │ Dart Version │ Release Date │ Global │ Local │ 3├───────────────┼─────────┼─────────────────┼──────────────┼──────────────┼────────┼───────┤ 4│ custom_3.22.0 │ │ 3.22.0-ohos │ 3.4.0 │ │ │ │ 5├───────────────┼─────────┼─────────────────┼──────────────┼──────────────┼────────┼───────┤

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

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

1"dart.flutterSdkPath": ".fvm/versions/custom_3.22.0"

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

1sdkPath: .fvm/versions/custom_3.22.0

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

1flutter create --platforms ohos .

其中,.代表当前目录。

目录结构类似如下所示

1├── README.md 2├── analysis_options.yaml 3├── assets 4├── build 5├── env 6├── lib 7│ ├── config 8│ └── main.dart 9├── melos_ohos_app.iml 10├── ohos 11│ ├── AppScope 12│ ├── build-profile.json5 13│ ├── entry 14│ ├── har 15│ ├── hvigor 16│ ├── hvigorfile.ts 17│ ├── local.properties 18│ ├── oh-package-lock.json5 19│ ├── oh-package.json5 20│ └── oh_modules 21├── pubspec.lock 22├── pubspec.yaml 23└── pubspec_overrides.yaml

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

签名

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

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 出现相应的签名配置信息。

运行

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

参考资料

点赞
收藏

评论区

加载中...

相关推荐

鸿蒙Flutter实战:12-使用模拟器开发调试

鸿蒙Flutter实战:使用模拟器开发调试前提开发电脑需为M系列芯片(ARM架构)的Mac电脑目前Flutter鸿蒙开发,无法使用X86架构的模拟器,只能使用ARM架构的模拟器创建项目等开发环境搭建成功,使用fluttercreate命令创建项目新项目ba

鸿蒙Flutter实战:04-如何使用DevTools调试Webview

鸿蒙Flutter如何使用DevTools调试Webview在《鸿蒙Flutter开发中集成Webview》,介绍了如果在Flutter中集成Webview.本文则为Webview的调试方法。配置WebviewCustomView.ets文件中,在生命周期

鸿蒙Flutter实战:05-使用第三方插件

鸿蒙Flutter实战:使用第三方插件在鸿蒙Flutter开发中,如果涉及到使用原生功能,就要使用插件。使用插件有两种方式,一种是自己编写原生ArkTS代码,在Dart侧调用。另外一种是使用第三方代码。方式一:编号原生ArkTS代码该方案可以使用Platf

鸿蒙Flutter实战:06-使用ArkTs开发Flutter鸿蒙插件

使用ArkTs开发Flutter鸿蒙平台插件本文讲述如何开发一个Flutter鸿蒙插件,如何实现Flutter与鸿蒙的混合开发,以及双端消息通信。Flutter侧,编写MethodChanneldartconstMethodChannelmethodCha

鸿蒙Flutter实战:01-搭建开发环境

鸿蒙Flutter实战:01搭建开发环境

鸿蒙Flutter实战:08-如何调试代码

鸿蒙Flutter实战:如何调试代码1.环境搭建参考文章搭建好开发环境。IDE安装好DevEco和VsCode/AndroidStudio。2.配置如果是vscode,可以在.vscode/launch.json文件中,增加以下配置json"name":"