手把手教你玩转Flutter之Flutter环境搭建_[{ "resource": "/users/terrydunlap/desktop/code/fl

手把手教你玩转Flutter之Flutter环境搭建

---

前言

Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。

同时，通过Flutter框架开发的移动端应用，可以在Anroid和IOS中完美使用，不需要再单独开发Android或IOS版本，目前Flutter已经成为移动端开发热门的工具。

---

提示：本文是以Windows为例，记录了在Windows操作系统中构建Flutter开发环境的步骤。

一、配置国内镜像

Flutter官方为国内开发者设立了镜像，在开始配置Flutter环境时，首先要进行配置。需要我们在环境变量中加入如下两个环境变量：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

在Windows系统中的具体操作为：右键此电脑----》属性----》高级系统设置---》环境变量----》新建环境变量----》添加环境变量如下：

•     变量名：PUB_HOSTED_URL  变量值：https://pub.flutter-io.cn
•     变量名：FLUTTER_STORAGE_BASE_URL  变量值：https://pub.flutter-io.cn

添加完成后，可以在环境变量页面看到新添加的两个变量，如下图，之后重启电脑。

---

 

二、下载Flutter SDK

1.官网下载

下载地址：https://flutter.dev/docs/development/tools/sdk/releases，可以选择下载稳定版本和测试版本。

下载完成后会得到一个压缩包，如我下载的是1.22.5的稳定版：

将压缩包解压

2.配置环境变量

将Flutter解压后的bin文件夹添加到系统的Path环境变量中，使得可以通过Windows自带的终端运行Flutter命名，如下图：

3.验证Flutter是否安装成功

打开Windows终端，在终端中输入Flutter，出现如下内容则说明安装成功：

---

 三、安装配置Android Studio

1.安装Android Studio

安装Android Studio的教程比较多，在这里就不予赘述了，有问题的同学请自行搜索或者查看本文参考资料中包含的链接。

2.安装Flutter和Dart插件

安装完成Android Studio后，还需要安装Flutter和Dart的插件。依次点击File---》Settings---》Plugins，在Plugins中搜索dart和flutter，并点击install，安装完成后重启IDE即可，如下图：

3.检查Flutter环境

在终端中输入flutter doctor可以检查目前flutter环境的搭建情况，如：

可以看到，红色X标识出的为目前没有配置好的地方，根据错误中给出的修改意见，进行相应修改即可。在本例中可以看到，提示Flutter和Dart的插件没有安装，但实际情况是已经在上一步中进行了安装，同时也不影响使用，因此暂时不管它。

---

 四、第一个Flutter应用

1.搭建Flutter应用

在Android Studio中依次点击File---》new---》new flutter project，选择第一个Flutter Application，并为应用起名字，之后一路next，直到工程建立成功，如下图：

2.运行Flutter应用

在运行Flutter应用前，我们需要将手机通过USB连接至电脑，或者建立虚拟机器，建立虚拟机器的方法：Tools>Android>AVD Manager。建立完成后，选择相应机器，点击运行按钮后即可运行flutter程序，如下图：

默认程序运行后会出现如下界面：

3.常见问题记录

问题1：运行程序时一直卡在“Running Gradle task 'assembleDebug'” 

产生这个问题的原因是由于网络引起的，我们无法访问到Google，因此需要修改镜像

首先，修改工程中android/build.gradle文件，在repositories中注释google()和jcenter()，新增如下代码：

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

其次，修改Flutter的配置文件，文件位置在\packages\flutter_tools\gradle\flutter.gradle，同样注释掉 google()和jcenter()，并新增如下代码：

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

 

---

参考资料：

1. http://www.zyiz.net/tech/detail-141792.html
2. https://www.jianshu.com/p/b9d43dd1e25e
3. https://www.jianshu.com/p/b24ae445e167
4. https://book.flutterchina.club/chapter1/install_flutter.html