Flutter详细的环境配置

什么是Flutter

Flutter是一款移动应用程序SDK，一份代码能够同时生成iOS和Android两个高性能、高保真的应用程序。

Flutter目标是使开发人员可以交付在不一样平台上都感受天然流畅的高性能应用程序。咱们兼容滚动行为、排版、图标等方面的差别。

无需移动开发经验便可开始使用。应用程序是用Dart语言编写的，若是您使用过Java或JavaScript之类的语言，则该应用程序看起来很熟悉。 使用面向对象语言的经验绝对有帮助，但一些Flutter应用程序甚至是没有编程经验的人写的！

以上是官网的简单介绍，想了解更多的，可自行去Flutter 官网了解。若是想轻松理解的，可去Flutter中文网 。

Flutter环境配置

本文主要是Window环境下的配置，其余环境的配置可参考Flutter 官网，有MAC跟Linux的环境。

Flutter配置环境所需工具

Git

命令提示符或PowerShell

步骤

1. 用git去clone Flutter SDK下来

git clone -b beta https://github.com/flutter/flutter.git
复制代码

2. 配置好flutter/bin的环境变量
3. 用命令提示符或者PowerShell查看是否须要安装任何依赖项。

flutter doctor
复制代码

4. 在Android Studio或者IntelliJ IDEA选择一种IDE，安装Flutter插件和Dart插件

5. 结束！！！

这5个步骤真的很简单，Google每次的新东西都是表面笑嘻嘻...

上述的步骤实际上是我精简下来，主体就是把上面的步骤执行完就能够运行了。可是官网文档在写的时候会把一些注意项放到另外的位置，或者是藏得有点深。因此会踩到不少坑。下面来讲一下，我踩的坑

步骤一出现的坑位

若是大家是去看官网文档的步骤，你会发现第一步实际上是

git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户须要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户须要设置
export PATH=`pwd`/flutter/bin:$PATH
复制代码

注意： 因为一些flutter命令须要联网获取数据，若是您是在国内访问，因为众所周知的缘由，直接访问极可能不会成功。 上面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google为国内开发者搭建的临时镜像。详情请参考 Using Flutter in China

哇！看到上面的注释，第一次感受到Google对咱们的照顾。

这里有两个坑

一、这个命令是在git命令窗打的（这不是废话）

因为本人不是很熟悉命令提示符的全部命令，一开始觉得export是git上(先入为主)。等到上面命令复制执行完，正常状况可以拉取到代码（若是对github网络有限制的，就会失败）。

二、export最好不要在git命令窗执行

export实际上是对此次执行指定一个临时地址，由于flutter不支持在git的命令窗执行。。。（这里我感到google深深的恶意），在 Using Flutter in China这个网址有详细的说明，而且有正确的执行顺序

步骤三出现的坑

第三步的坑是由第一步的不当操做引发的，第三步的操做须要在命令提示符或者powerShell上执行。这里的最大的坑是下载各类依赖的网络问题以及显示问题。网络问题无非就是上面的配置是否生效了，多检查几下就能确保。显示的问题就是个很无语的，在下载过程，可能个别项是在正常下载，可是界面会一直卡在那里，其实后面一直在下载，只是你不知道进度，并且下载速度也很慢。

显示的问题，我本身的解决方案是，从新打开执行命令，就能够了。淡淡的忧伤。若是有更好的方案，请告知下。谢谢！

个别状况下，命令窗会出现符号乱码，这里的解决方案是右键窗口，点击属性，修改字体为除了点阵字体便可。

步骤一的正确操做

打开git命令窗，执行下面命令，而后关掉，之后都没它的事了。

```git clone -b beta https://github.com/flutter/flutter.git``

配置用户环境变量（这两个不用系统环境变量）

PUB_HOSTED_URL:https://pub.flutter-io.cn

FLUTTER_STORAGE_BASE_URL:https://storage.flutter-io.cn

Google还提供另一个镜像地址（我的体验还蛮快的）

FLUTTER_STORAGE_BASE_URL: mirrors.sjtug.sjtu.edu.cn/

PUB_HOSTED_URL: <https://dart-pub.mirrors.sjtug.sjtu.edu.cn/

配置系统环境变量Flutter

把你的Flutter\bin的地址添加进去

而后步骤2、步骤三执行下去，最终看到下面的输出就完成，Flutter的环境配置了

上图有6个√，其中3项是IDE的，这三个很容易弄，没啥坑。

第一个√，只要Flutter SDK的各项依赖下载好，基本也就OK了。

第二个√，跟你的Android SDK版本相关，若是你的Android SDK路径是自定义的路径的，须要配置一个系统环境变量ANDROID_HOME，值为SDK的地址。这里还有另外的问题，就是你的SDK最高版本的包里面不能为空，否则第二个√是不经过，不经过会出现下面截图的问题

解决方案就是把空的文件夹删除掉，像个人Android-27这个文件夹下实际上是空的。

其实最简单的是

直接去别人处拷贝一份Flutter SDK 而且是下载好各类依赖项的包

秒好！！！

IDE配置

我这边使用的是Android Studio，IDE的配置只是安装两个插件Flutter跟Dart，通常Dart已经安装好了，因此只须要安装好Flutter插件便可。安装好后，重启完成。

体验Flutter的Hello World

File->new->New Flutter Project

按照建立步骤一个一个点下去，第一次建立会有点卡顿，后期Google应该会优化好点，等OK了就点击Run，第一个Flutter应用程序就行了

不过，这个程序在启动时候会出现白屏，时间大概有1~2秒，不是很能接受。不过，才出来也能接受了，毕竟热重载的功能仍是比较爽的。

好了，本篇Flutter配置到此结束，后面会出一篇更实用的Flutter文章。

附工具下载连接

Git for Windows (Git命令行工具)

若是已安装Git for Windows，请确保命令提示符或PowerShell中运行 git 命令

PowerShell最好是5.0的版本，才能比较好地支持Flutter。

若是读者不想用命令提示符的话，使用PowerShell的话，如下有几点须要注意下

Win 7 自带的PowerShell 2.0的，win 10自带的powerShell 5.0 。若是win 7 的读者想升级版本的话，这里PowerShell官网下载地址 。