周末小课堂：Android开发：Flutter入门踩坑教程：运行第一个Flutter程序！

小伙伴们大家好，今天是周六休息时间，很难得在周末的时间里写一篇博客来和大家分享技术知识~距离上一篇博客已经一个月了，这一个月来博主一直都在逆向分析小米MIUI系统，MIUI系统作为国内几大成熟流行的手机平台系统，安全性和防范意识确实非常之高，也因此延误了博客更新时间，后面博主会推出针对MIUI系统的安全防范讲解博客，还希望大家好好学习呦！

好了，本次博客将会带领大家学习一个新的技术知识：Flutter框架。作为一名Android开发工程师，Flutter是真心建议大家应该掌握的技能之一！什么是Flutter？Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。这里给出Flutter中文网址：Flutter中文网。关于Flutter的信息这里就不再多说，感兴趣的小伙伴请自行去官网查看。

正如标题所示，本篇博文主要带领大家进行Flutter的入门和踩坑历程，纵然官网上给出了比较详细的步骤，但是该来的坑还是在所难免！首先第一步，我们需要搭建Flutter环境。

搭建Flutter环境其实很简单，大家完全可以按照官网给出的步骤一步一步来，这里的坑还是比较少的，博主一路下来比较顺畅。注意，这里博主的操作系统是Windows系统。个人感觉Flutter中文网上给出的搭建步骤有点摸不太清，博主为容易迷路的小伙伴给出一个明确的步骤：第一步：先下载Flutter SDK。这里给出Flutter的下载地址：Flutter_V1.00。直接点击链接进行下载，下载完成后解压到指定的文件路径。博主这里在D盘新建了一个文件夹名字为：AndroidFlutter，把下载完后的压缩包解压到该文件夹下：如图所示

 此时flutter文件夹就是Flutter SDK，我们在后面配置Android Studio的时候，还需要填写该路径。

第二步就是修改环境变量了。打开你的环境变量，进行编辑，在Path条目下追加上Flutter SDK压缩包解压路径加上/flutter/bin，使用;进行分割。例如博主这里解压到的文件夹路径是D:/AndroidFlutter，那么就追加上字符D:\AndroidFlutter\flutter\bin。后面按照官网的说法，我们还需要添加两个条目，是谷歌为开发者搭建的临时镜像，添加的环境变量内容如图所示：

 

 环境变量配置完成后就重启电脑。

重启电脑完成后，就打开命令提示符执行命令：

flutter doctor

这句命令会对Flutter的各种配置进行检查工作，看看你什么工作还没有完成，重点关注前面带有”x“字符的提示信息，这说明目前你还缺少这个配置或者插件，这时候你直接运行提示命令或者去Android Studioan安装插件即可！

如果说你的电脑已经安装了Android Studio并且有Android SDK，那么这个时候运行flutter doctor 进行检查出现的检查log如下：

PS C:\Users\Administrator> flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, v0.5.1, on Microsoft Windows [Version 10.0.17134.165], locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.1)
    X Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Android Studio (version 3.1)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] Connected devices
    ! No devices available

! Doctor found issues in 2 categories.

首先第一个提醒你的是需要接受Android licenses，在后面给你的有相关命令，执行：

flutter doctor --android-licenses

接下来就是一路输入y，然后执行，一直到最后。

后面两个的提示：

[√] Android Studio (version 3.1)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.

这里告诉你的是Android Studio 你还缺少两个插件，分别是Flutter插件和Dart插件。那么接下来就是打开Android Studi，点击Plugins，选择Browse repositories，搜索Flutter直接进行下载安装即可。注意的是，在安装Flutter的时候，Android Studio也会自动为我们安装Dart插件。 

好了，经过上面的步骤，Flutter开发环境就基本搭建完毕，下面就是开始运行第一个Flutter程序，接下来也就是正式踩坑的时候了！打开Android Studio，首先我们配置一下Flutter SDK。点击：File->Settings->Languages&frameworks->Flutter，如图所示：

在Flutter SDK path目录后面选择之前我们Flutter SDK解压路径，这里博主为D:\AndroidFlutter\flutter，选择成功后在目录下面会出现Flutter的版本相关信息，表示SDK路径正确。

配置SDK后，我们就可以创建一个Flutter项目了，点击File->new->new Flutter Project，如图所示：

选择Flutter Application，点击Next

 

下面就是写项目的名字，然后点击next，最后点击finish，等待Flutter项目创建完成。这里博主创建了一个test_flutter的Flutter项目，创建完成如下：

 

这里大致说一下项目目录。首先你先看到的是main.dart文件，这个是整个项目的入口，也是主要逻辑所在，后面我们进行开发也主要是从这个main.dart中修改，它的重要性好比Android项目中的MainActivity。但是作为一个App是不可能没有Activity的，那么它的Activity跑哪去了？其实MainActivity还存在，它在android/app/src/main/java/目录下，如图所示：

我们看这个目录下终于有了久违的亲切感，目录的构成基本和Android项目保持一致。我们看MainActivity的代码，发现非常短，就只有两句代码，这里其实就可以推断出MainActivity其实还是入口活动，所有的逻辑包括界面的显示都交给了Flutter框架去处理。大致分析到此结束，下面我们就赶快运行一下项目看看Flutter的面目吧：

运行项目还是非常的简单，直接点击即可，运行开始，我们踩坑正式开始！为了踩坑透彻，博主这里归结四个阶段，这里博主采坑主要在前两个阶段，首先第一个阶段：Initializing gradle阶段：如图所示

 在这个阶段有一个大坑，你很可能会报下面这个错误：

Initializing gradle…
Finished with error: ProcessException: Process ”/Users/***/AndroidStudioProjects/test_flutter/android/gradlew” exited abnormally:
Downloading https://services.gradle.org/distributions/gradle-4.10.2-all.zip

 这个错误很直白地告诉你，gradle-4.10.2-all.zip下载失败！为什么会下载失败？？？因为你在中国，众所周知的原因，无法访问到外网，所以gradle-4.10.2-all.zip下载失败非常正常！那么是哪里执行了这个压缩包的下载命令？答案在这里，打开项目下的gradle-wrapper.properties文件查看代码，所处路径为：/android/gradle/wrapper/，代码如下：

#Fri Jun 23 08:50:38 CEST 2017
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip

我们可以很明确的看到最后一句distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip，就是在这里声明了 gradle-4.10.2-all.zip压缩包的下载地址，可惜非常抱歉的是我们无法访问这个下载地址！那要怎么办？难道就放弃Flutter不成？答案是当然不能，解决方法有一个，我们需要先把gradle-4.10.2-all.zip这个压缩包下载到本地，然后修改distributionUrl后面的Url地址，改为该文件在我们电脑上的本地地址即可！

好了，这里废话不多说，直接给出gradle-4.10.2-all.zip的下载地址：gradle-4.10.2-all.zip下载，点击链接直接下载。下载完成后先别着急，这里博主建议最好把该压缩包单独放在一个文件夹内，文件夹名字不要带中文，特殊字符等，毕竟这个路径是一条Url，路径有问题就会导致Url编译出错。博主这里在D盘内新建一个文件夹，名字为androidgradle，然后把下载好的压缩包放进去，如图所示：

下面就是修改 distributionUrl的地址，这里写地址一定要要注意格式问题，一不小心可能就会编译出错！博主这里教给大家一个非常简单的判别格式正确方法，你把你写的地址拿到浏览器中运行一下，看看是否能正确访问到你本地的内容，如果能的话那么该条Url就是正确的，如果访问失败，那就是错误的！

那么这里博主就修改它的访问地址改为：

distributionUrl=file:///D:/androidgradle/gradle-4.10.2-all.zip

这样就访问到了我们本地的压缩包文件，到这里第一个踩坑结束！

下面是踩坑第二个阶段：Resolving dependencies阶段，如图所示：

在这个阶段内你可能会遇到一个错误：File C:\Users\Administrator\.android\repositories.cfg could not be loaded.

遇见这个错误，你首先就要去Default Settings下的Android SDK，查看SDK Tools中有一个名为”Android Emulator“是否已经安装，如图所示：

博主正是因为没有安装该工具而报错。事实上，博主这里建议大家把SDK Tools内的所有工具全部都安装上，因为你并不清楚接下来会有哪一个Tools会被使用到，还是全部都安装上比较好。

好了，到这里博主的踩坑之旅基本就结束了，接下来就很顺利的运行出程序，如图所示：

 

成功的运行出Flutter程序！我们可以很明显的看到，Flutter真的比Android原生的界面UI漂亮很多，而且根据官方的介绍，Flutter还拥有更强的快速开发能力！所以对于开发人员，掌握Flutter势在必行！

博主在后面也会不定时的推出Flutter开发相关的博客，还希望大家好好学习呦！ 

今天带领大家踩坑到此结束，有不懂的地方可以评论留言告知，我看到后会及时回复。有需要引用本篇博文的地方请标明出处，谢谢合作！