Flutter技术学习（一）

1.前言

作为一名Android开发已经多年了，现在感觉自己的技术已经有了停滞，因此决定更进一步系统的学习新的技术，并同时深入学习Android技术。因此在这里立下一个Flag，完成两个系列的技术博客，一个是Android开发进阶，另一个就是这篇文章要讲的Flutter开发，Flutter是Google的移动UI框架，可以快速的在Android和iOS上构建原生用户界面。

2.Flutter 环境搭建

Flutter的环境搭建初始可能会比较繁琐，但是如果你本地已经搭建好了Android的开发环境，那么将省事很多，这里我主要讲下在Windowds环境下，如何从0开始搭建Flutter环境。

2.1 代理设置

因为国内访问Flutter有可能会受到限制，所以需要设置代理或者科学上网，这里具体可查看下google在国内设置的官方镜像：https://flutterchina.club/setup-windows/
即将下面的设置加入到环境变量中：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
在Windows中方式如下：


因为是临时镜像，所以不能保证一直可用，大家可以关注下Using Flutter in China

2.2 Git环境搭建

Flutter还需要安装的命令行工具是Git for Windows，大家根据自己开发环境下载对应的安装包即可。

2.3 Flutter SDK

在本地目录创建文件夹，在此目录打开git Bash，使用命令git clone -b beta https://github.com/flutter/flutter.git
下载Flutter SDK。

这里下载过程可能会比较慢，耐心等待其下载完成即可，下载完成显示如下：

在下载完成后，将flutter添加进环境变量，方便以后使用，即例如将下面目录添加进path环境变量中，具体的位置根据大家自己的环境进行设置：

2.4 开发工具的下载

这里因为我是Android开发，我推荐使用AndroidStudio，AndroidStudio可以在此地址下载：https://developer.android.google.cn/studio
下载完成安装，并根据安装引导下载Android SDK，并将Android SDK同样配置到path的环境变量中：

2.5 检查Flutter运行环境

在上面的步骤操作完成后，打开命令行，输入flutter doctor：

这里会检查你的开发环境是否已经配置好了，Flutter SDK、Android SDK、开发工具（Android studio)以及是否有移动设备连接，这里我使用的真机连接的电脑，大家也可以使用模拟器进行连接，可以在AndroidStudio中的AVD Manager中进行创建：

2.6 Flutter 插件

在AndroidStudio上开发Flutter程序还需要安装插件，具体方法是在AndroidStudio的settings–Plugins中搜索Flutter进行安装，安装完成后根据提示需要重启AndroidStudio：

3.运行Flutter demo程序

打开AndroidStudio，创建一个Flutter项目：

创建完成后，连接上移动设备或者使用模拟器，直接使用Shift+F10运行这个demo工程，效果如下：

这样我们第一个flutter程序就已经成功运行了！