Flutter开发环境搭建及项目创建

一、Flutter框架介绍

Flutter是谷歌的高性能、跨端UI框架，可以通过一套代码，支持iOS、Android、Windows/MAC/Linux等多个平台，且能达到原生性能。 Flutter也可以与平台原生代码进行混合开发。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。
本次我们这部分是基于社区版本3.7所编写，之前在做鸿蒙原生应用开发布道的时候，很多人都对Flutter适配鸿蒙比较感兴趣，这不就来了。
这里大家要了解到的就是Flutter是框架，开发语言是Dart，类似于鸿蒙原生应用开发中，ArkUI是框架，ArkTS是开发语言。

二、Flutter架构

Flutter 被设计为一个可扩展的分层系统。它可以被看作是各个独立的组件的系列合集，上层组件各自依赖下层组件。组件无法越权访问更底层的内容，并且框架层中的各个部分都是可选且可替代的。每一块都各司其职，负责自己的模块。

三、Flutter SDK下载

下载鸿蒙版flutter
项目地址：https://gitcode.com/openharmony-tpc/flutter_flutter.git

git clone https://gitcode.com/openharmony-sig/flutter_flutter
git checkout -b 3.22.0-ohos origin/3.22.0-ohos

四、Android Studio下载安装

Android Studio下载链接

五、DevEco Studio下载安装

DevEco Studio下载链接
六、环境变量配置

// Android环境
setx ANDROID_HOME "D:\androidSDK"
setx JAVA_HOME "D:\java"

// Flutter环境
setx FLUTTER_SDK "D:\flutterSDK\flutter_3.22.0\flutter_flutter"
setx FLUTTER_STORAGE_BASE_URL "https://storage.flutter-io.cn"
setx FLUTTER_GIT_URL "https://gitcode.com/openharmony-tpc/flutter_flutter.git"
setx PUB_CACHE "D:\PUB"
setx PUB_HOSTED_URL "https://pub.flutter-io.cn"

// 鸿蒙环境
setx TOOL_HOME "C:\Program Files\Huawei\DevEco Studio"

// path环境
%TOOL_HOME%\bin
%TOOL_HOME%\tools\ohpm\bin
%TOOL_HOME%\tools\hvigor\bin
%TOOL_HOME%\tools\node
%FLUTTER_SDK%\bin
D:\Gradle\gradle-8.11.1\bin
%JAVA_HOME%\bin
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\build-tools

七、构建步骤

1.运行 flutter doctor -v 检查环境变量配置是否正确，Futter与OpenHarmony应都为ok标识，若两处提示缺少环境，按提示补上相应环境即可。

2.创建工程。

 flutter create --platforms ohos <projectName>

3.安装项目依赖
cd
flutter pub get

4.编译hap包，编译产物在/ohos/entry/build/default/outputs/default/entry-default-signed.hap下。

 flutter build hap --release

5.安装应用，通过 flutter devices 指令发现真机设备之后，然后安装到OpenHarmony手机中。
方式一：进入编译产物目录，然后安装到OpenHarmony手机中。

hdc -t <deviceId> install <hap file path>

方式二：进入项目目录，直接运行安装到OpenHarmony手机中。

flutter run --debug -d <deviceId>

6.构建app包命令。

flutter build app --release

八、已兼容OpenHarmony开发的指令列表

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