1.Flutter 简介
1.1 Flutter 是什么 ？
- Flutter 是一个 UI SDK（Software Development Kit）
- 跨平台解决方案：可以实现一套代码发布移动端（iOS、Android、HarmonyOS）、Web端、桌面端
- 目前很多公司都在用它，比如：Google、阿里、字节、腾讯、小米，尤其是阿里的咸鱼团队，为 Flutter 的生态做出了很多贡献 https://space.bilibili.com/344928717
- Flutter 有着统一大前端的野望，并且它在不断蚕食 iOS、Android、HarmonyOS 这些原生开发
1.2 Flutter的几个特点：
美观、快速、高效、开放
- 美观
使用Flutter内置美丽的Material Design和Cupertino widget、丰富的motion API、平滑而自然的滑动效果和平台感知，为您的用户带来全新体验。 - 快速
Flutter 的 UI 渲染性能很好。在生产环境下，Flutter 将代码编译成机器码执行，并充分利用 GPU 的图形加速能力，因此使用 Flutter 开发的移动应用即使在低配手机上也能实现每秒 60 帧的 UI 渲染速度。
Flutter 引擎使用 C++ 编写，包括高效的 Skia 2D 渲染引擎，Dart 运行时和文本渲染库。 - 高效
Hot Reload (热重载)，在前端已经不是什么新鲜的东西，但在移动端之前一直是没有的 - 开放
Flutter 是开放的，它是一个完全开源的框架。
2.Flutter开发环境搭建
2.1 Mac搭建 Flutter 开发环境
参考文档：https://flutter.cn/docs/get-started/install/macos
安装flutter
- 下载：https://docs.flutter.cn/get-started/install/macos/mobile-ios#install-the-flutter-sdk
- 选择自己的操作系统和最新稳定的版本（Stable版本）
- 创建一个可以安装 Flutter 的文件夹，文件夹名称随意，我这边命名为 flutter_dev, 将下载好的sdk拖入flutter_dev中
- 配置Flutter的环境变量
因为我们之后需要在命令行执行Flutter的命令，所以需要配置环境变量
macOS或者Linux系统，需要编辑~/.bash_profile文件 或者 ~/.zshenv 文件
export PATH=/Users/RobinLee/flutter_dev/flutter/bin:$PATH
创建 /.zshrc文件 ，编辑
source ~/.bash_profile
在终端中运行source ~/.zshrc命令，使新的环境变量设置立即生效。
在终端中执行flutter --version，出现如下内容，说明安装flutter成功
- 配置镜像
flutter项目会依赖一些东西，在国内下载这些依赖会有一些慢，所以我们可以将它们的安装源换成国内的（也就是设置国内的镜像）
macOS或者Linux操作系统，依然是编辑~/.bash_profile文件
#flutter镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
2.2 Windows搭建 Flutter 开发环境
- 参考文档：https://flutter.cn/docs/get-started/install/windows
- 下载：https://docs.flutter.cn/get-started/install/windows/mobile#install-the-flutter-sdk
- 选择自己的操作系统和最新稳定的版本（Stable版本）
安装Flutter - 解压下载好的 Flutter SDK
- 这个在 Windows 和 macOS 都是一样的（选择一个自己想要安装的目录）
- 配置 Flutter 的环境变量
- Windows 环境变量修改：点击计算机图标 - 属性 - 高级系统设置 - 高级 - 环境变量
- 找到 Path，在其中添加 Flutter SDK目录下bin目录
- 在终端中执行 flutter --version，出现如下内容，说明安装flutter成功
2.3 配置 ios环境
如果想为Flutter配置iOS开发环境，需要在我们的电脑上安装一个Xcode（此部分Windows电脑忽略）
Xcode是苹果公司的iOS和macOS的IDE，进行过iOS开发的童鞋应该都非常熟悉
如何安装Xcode呢？ 常见的是两种
- 直接在App Store上搜索Xcode，找到安装即可
这种安装方式有一个缺点，安装的一定是最新版本的（当然是用最新版本的最好）
但是最新版本的Xcode会对macOS系统有一定的要求，所以可能还要设计到系统升级
如果不希望系统升级，可以选择第二种方式 - 第二种方式是安装自己想要的Xcode的版本，需要手动去下载
进入https://developer.apple.com/download/more[2]页面
登录自己的Apple ID
在搜索框输入Xcode，回车搜索，找到各种版本Xcode下载即可
打开Xcode，右上角点击Xcode - Open Developer Tools - Simulator，这个时候会打开一个默认的iOS模拟器
方式二 打开Xcode，右上角点击Xcode - Settings
运行 Flutter doctor 来验证安装。
flutter doctor -v
2.4 配置Android环境
如果想为Flutter配置Android开发环境，需要在我们的电脑上安装一个Android Studio
Android Studio是基于IntelliJ IDEA的、Google 官方的 Android 应用集成开发环境 (IDE)。
- Android Studio的下载
下载地址：https://developer.android.google.cn/studio?hl=zh-cn
下载完成直接双击安装即可
将Android Studio拖到应用程序，双击打开，会自动下载，选定android sdk目录
由于自定义了Android-SDK的安装目录, 所以在运行flutter doctor命令之前，用flutter Config命令手动配置一下Android SDK的安装目录。
flutter config --android-sdk /Users/RobinLee/androidsdk
运行flutter doctor命令之前, 还需要安装cmdline-tools
执行一下同意Android协议命令，会出现很多协议问询对话，都输y。
flutter doctor --android-licenses
安装配置完Android Studio之后运行flutter doctor,重新检查平台依赖安装情况, 可以看到，一切都OK了。
点击Plugins开始安装Dart和Flutter插件:
重启之后, 你会发现出现一个New Flutter Project的菜单图标，现在flutter的开发环境已经配置好了，接下来我们创建自己的第一个flutter项目。
创建flutter项目
点击创建之后，项目就创建好了。想看flutter项目运行效果，还得安装手机模拟器。
启动模拟器运行flutter项目
2.5 配置鸿蒙环境
能够开发构建 HarmonyOS 应用，需要 DevEco Studio 和模拟器。
下载中心 | 华为开发者联盟-HarmonyOS开发者官网
https://developer.huawei.com/consumer/cn/download/all
[鸿蒙版Flutter环境搭建指导]
鸿蒙版Flutter: https://gitee.com/openharmony-sig/flutter_flutter
下载针对OpenHarmony的Flutter版本 拖到 flutter_dev目录下
或者直接clone代码地址
git clone -b dev git@gitee.com:openharmony-sig/flutter_flutter.git
配置环境变量
# 国内镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# 拉取下来的flutter_flutter/bin目录
export PATH=/home/<user>/ohos/flutter_flutter/bin:$PATH
# HamonyOS SDK
export TOOL_HOME=/Applications/DevEco-Studio.app/Contents # mac环境
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环境
TOOL_HOME = D:\devecostudio-windows\DevEco Studio
DEVECO_SDK_HOME=%TOOL_HOME%\sdk
PATH=%TOOL_HOME%\tools\ohpm\bin
PATH=%TOOL_HOME%\tools\hvigor\bin
PATH=%TOOL_HOME%\tools\node
这是我的mac上配置的环境变量
运行 flutter doctor -v 检查环境变量配置是否正确，Futter与OpenHarmony应都为ok标识
创建工程
# 创建工程
flutter create --platforms ohos <projectName>
编译hap包，编译产物在/ohos/entry/build/default/outputs/default/entry-default-signed.hap下。
# 进入工程根目录编译
# 示例：flutter build hap [--target-platform ohos-arm64] --release
flutter build hap --release
安装应用，通过flutter devices指令发现真机设备之后，然后安装到鸿蒙手机中。
方式一：进入编译产物目录，然后安装到鸿蒙手机中
hdc -t <deviceId> install <hap file path>
方式二：进入项目目录，直接运行安装到鸿蒙手机中
flutter run --debug -d <deviceId>
构建app包命令：
# 示例：flutter build app --release
flutter build app --release
