跨平台方案Flutter入门——开发环境搭建

目录

  • 系统配置要求
  • 获取 Flutter SDK
  • 配置环境变量
  • 安装 Android Studio
  • 运行 flutter doctor
    • 1. Anroid 的 SDK 路径
    • 2. 许可未同意
  • Android Studio 安装插件
  • Android Studio 创建第一个 Flutter 应用

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 选项。

这些配置以及工具,对开发人员来说应该不是问题,这里不做赘述了。

获取 Flutter SDK

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路径。

跨平台方案Flutter入门——开发环境搭建_第1张图片

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

跨平台方案Flutter入门——开发环境搭建_第2张图片

安装 Android Studio

1.下载并安装 Android Studio
2.运行 Android Studio,并进入 ‘Android Studio Setup Wizard’,这会安装最新的 Android SDK, Android SDK Platform-Tools 以及 Android SDK Build-Tools,这些都是在开发 Android Flutter 应用时所需要的。

运行 flutter doctor

以上操作完成后,关键的时刻到了。运行 flutter 命令试试看吧。

打开 Windows 的 CMD 窗口,运行以下命令。

flutter doctor

这个命令会检查你的现有环境,并将检测结果以报告形式呈现出来。第一次运行,一般都会遇到一些问题,总结下目前我遇到的。

1. Anroid 的 SDK 路径

如下,如果提示找不到 Android SDK 的路径。可能是因为安装 Android Studio 时,选择了自定义设置,手动设置了 SDK 的存放路径。那么按照提示,需要声明当前 SDK 的存放路径。

这里注意下,这个 SDK 说的是 Android 的 SDK ,而不是 Flutter 的 SDK。

跨平台方案Flutter入门——开发环境搭建_第3张图片
根据给出的提示,使用以下命令,告诉 flutter 当前 SDK 的存放路径即可。

flutter config --android-sdk D:\software_work\Android\Sdk

在这里插入图片描述
这边根据提示,建议重启一下 Windows 命令行窗口。

2. 许可未同意

如下,提示 Android 许可未接受。

跨平台方案Flutter入门——开发环境搭建_第4张图片
这个好办,根据提示,运行下以下命令。全部同意即可。

flutter doctor --android-licenses

跨平台方案Flutter入门——开发环境搭建_第5张图片

问题全部处理完毕后,运行 flutter doctor ,提示 No issues found ,那么恭喜你,Flutter 的世界离你很近了。

跨平台方案Flutter入门——开发环境搭建_第6张图片

Android Studio 安装插件

接下来,就是配置你的 IDE 了,让 Android Studio 支持 Flutter 项目的创建。

这里比较简单,打开 Plugins 选项,找到 Flutter ,安装好后重启一下即可。

跨平台方案Flutter入门——开发环境搭建_第7张图片

Android Studio 创建第一个 Flutter 应用

一切工作准备就绪,准备进入正题了。

1.打开 Android Studio,选择 New Flutter Project…

2.选择 Flutter Applicatin 做为项目类型,点击 Next

3.这里需要填写一个 Flutter SDK 的路径。就是本文第二章里解压后的路径。

跨平台方案Flutter入门——开发环境搭建_第8张图片
4.点击 Finish。就开始初始化项目啦,静待初始化完毕。

跨平台方案Flutter入门——开发环境搭建_第9张图片
初始化完毕,我们看下项目文件结构,包含了 Android 、IOS、 Web 三端的文件夹。

嘿嘿,下面 Flutter 的世界就任你遨游啦。

你可能感兴趣的:(android,flutter)