Flutter 自2017年诞生以来,目前已经有不少大厂的应用(如微信,QQ等)都接入了 Flutter 方案。由此可见,Flutter 的跨平台方案已经逐渐被市场认可和接受。
Flutter 虽然是跨平台的解决方案,但在开发时是需要 Android 和 IOS 开发环境的,也就是 JDK 、Android SDK、Xcode 等环境配置。
呃,由于经费原因,本文暂以 Windows 环境为例,记录下 Flutter 开发环境搭建的全流程。
要想安装和运行 Flutter,你的开发环境至少应该满足如下的需求:
操作系统:Windows 7 SP1 或更高的版本(基于 x86-64 的 64 位操作系统)。
磁盘空间:除安装 IDE 和一些工具之外还应有至少 1.64 GB 的空间。
工具:要让 Flutter 在你的开发环境中正常使用,依赖于以下的工具:
– Windows PowerShell 5.0 或者更高的版本
– Git for Windows 2.x,并且勾选从 Windows 命令提示符使用 Git 选项。
这些配置以及工具,对开发人员来说应该不是问题,这里不做赘述了。
1.下载 SDK——flutter_windows_2.0.4
2.将压缩包解压,然后把其中的 flutter 目录整个放在你想放置 Flutter SDK 的路径中(如 D:\software_work\flutter)
1.Flutter 运行路径。如果要在 Windows 的 CMD 窗口中运行 Flutter 命令,需要将 Flutter 的运行文件路径加入到 PATH 环境变量。
打开 环境变量 设置,在 用户变量 一栏的 Path 变量中,填入刚刚解压的 SDK 的bin路径。
2.首次运行 Flutter 命令,需要下载一些资源。但是国内的网络你懂的,会有一些限制,导致资源下载失败。
所以,你需要镜像站点,来帮助你的 Flutter 命令行工具能下载到其所需的资源。设置两个环境变量即可:PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL。
同样的,打开 环境变量 设置界面,在 用户变量 一栏中,新建以下两个环境变量。
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
1.下载并安装 Android Studio
2.运行 Android Studio,并进入 ‘Android Studio Setup Wizard’,这会安装最新的 Android SDK, Android SDK Platform-Tools 以及 Android SDK Build-Tools,这些都是在开发 Android Flutter 应用时所需要的。
以上操作完成后,关键的时刻到了。运行 flutter 命令试试看吧。
打开 Windows 的 CMD 窗口,运行以下命令。
flutter doctor
这个命令会检查你的现有环境,并将检测结果以报告形式呈现出来。第一次运行,一般都会遇到一些问题,总结下目前我遇到的。
如下,如果提示找不到 Android SDK 的路径。可能是因为安装 Android Studio 时,选择了自定义设置,手动设置了 SDK 的存放路径。那么按照提示,需要声明当前 SDK 的存放路径。
这里注意下,这个 SDK 说的是 Android 的 SDK ,而不是 Flutter 的 SDK。
根据给出的提示,使用以下命令,告诉 flutter 当前 SDK 的存放路径即可。
flutter config --android-sdk D:\software_work\Android\Sdk
如下,提示 Android 许可未接受。
flutter doctor --android-licenses
问题全部处理完毕后,运行 flutter doctor ,提示 No issues found ,那么恭喜你,Flutter 的世界离你很近了。
接下来,就是配置你的 IDE 了,让 Android Studio 支持 Flutter 项目的创建。
这里比较简单,打开 Plugins 选项,找到 Flutter ,安装好后重启一下即可。
一切工作准备就绪,准备进入正题了。
1.打开 Android Studio,选择 New Flutter Project…
2.选择 Flutter Applicatin 做为项目类型,点击 Next
3.这里需要填写一个 Flutter SDK 的路径。就是本文第二章里解压后的路径。
4.点击 Finish。就开始初始化项目啦,静待初始化完毕。
初始化完毕,我们看下项目文件结构,包含了 Android 、IOS、 Web 三端的文件夹。
嘿嘿,下面 Flutter 的世界就任你遨游啦。