手把手教你玩转Flutter之Flutter环境搭建
文章目录
目录
前言
一、配置国内镜像
二、下载Flutter SDK
1.官网下载
2.配置环境变量
3.验证Flutter是否安装成功
三、安装配置Android Studio
1.安装Android Studio
2.安装Flutter和Dart插件
3.检查Flutter环境
四、第一个Flutter应用
1.搭建Flutter应用
2.运行Flutter应用
3.常见问题记录
参考资料：
前言
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 变量值：Dart packages
变量名：FLUTTER_STORAGE_BASE_URL 变量值：Dart packages
添加完成后，可以在环境变量页面看到新添加的两个变量，如下图，之后重启电脑。
二、下载Flutter SDK
1.官网下载
下载地址：Flutter SDK releases | Flutter，可以选择下载稳定版本和测试版本。
下载完成后会得到一个压缩包，如我下载的是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' }
参考资料：
解决Flutter编译一直显示Running Gradle task 'assembleDebug' - Android开发 - 找一找教程网
flutter Running Gradle task 'assembleDebug' -
windows10 flutter安装全程 -
1.3 搭建Flutter开发环境 | 《Flutter实战·第二版》- Preview