酒杯里竟能蹦出友谊来 — 盖伊
写在前面
最近抽时间了解了Flutter，作为移动端开发者应该掌握这方面的技术，想必做开发的童鞋们都知道Flutter吧，那么什么是Flutter呢？
Flutter是谷歌的移动UI框架，可以快速在IOS和Android上构建高质量的原生用户界面，Flutter可以与现有的代码一起工作，在全世界，Flutter正在被越来越多的组织和开发者使用，并且Flutter是完全免费和开源的。
学习Flutter的第一步就是安装Flutter，有了Flutter环境才能编写代码运行APP。本篇文章以Windows为例，讲解如何安装Flutter。
Flutter的官方安装指导链接：Windows，macOS，Linux。
前期准备
在Windows系统上使用Flutter需要准备以下：
- Windows 7 + （64-bit）
- Git
- 400M磁盘空间
- Android Studio 3.0 +
- Android SDK 4.1 +
- PowerShell 5.0 +
Git安装方式，Android Studio安装方式，PowerShell安装方式
下载Flutter
有两种方式可以获取Flutter SDK，分别是从官网下载压缩包和使用Git工具拉取，下面分别介绍这两种方式如何获取Flutter SDK。
1.官网下载压缩包
这种方式比较简单，只要会下载和解压就可以，解压后Git工具是可以直接使用的。
- 进入https://flutter.dev/docs/get-started/install/windows，找到Get the Flutter SDK，然后有一个蓝色的按钮，点击即可下载到本地。
Get the Flutter SDK.png
- 下载完成后，解压到本地目录，以供后续使用，后续的Flutter开发都会从这里获取Flutter SDK。
Unzip Flutter SDK.png
- 然后进入flutter目录，打开Git输入git log命令即可看到Flutter近期的更新日志。
Git Log.png
2.使用Git工具拉取
- 这么好用的东西，怎么能有不在Github上放一份的道理呢，输入https://github.com/flutter/flutter即可进入Flutter仓库，找到clone or download按钮点击一次即可看到URL，然后Copy下来使用Git工具拉取。
Flutter URL.png
- 创建一个存放Flutter的目录，然后进入当前目录打开Git命令行，输入git clone https://github.com/flutter/flutter.git，国内访问会有问题的，这里的坑是必须要填的，一定要科学上网。
Git Clone Flutter.png
3.配置环境变量
找到Flutter的bin文件夹，Copy绝对路径，添加到系统变量Path中。
配置环境变量.png
4.查看Flutter版本
使用快捷键Win+R打开运行，输入cmd进入命令行，输入PowerShell即可进入PowerShell方式，然后输入命令flutter --version即可查看版本信息。
flutter --version.png
注意：若输入flutter或flutter -version会进行更新。
踩坑填坑
进入PowerShell输入命令flutter doctor诊断Flutter环境。
flutter doctor.png
坑1
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
! Some Android licenses not accepted. To resolve this, run：flutter doctor --android-licenses
这个问题的大概意思就是Android的许可没有被授权，后面并给出了解决方案。
- 输入命令flutter doctor --android-licenses，然后一路按y即可。
flutter doctor --android-licenses.png
- 最后再输入命令flutter doctor进行诊断，这个问题被解决了。
flutter doctor.png
坑2
Android Studio （not installed）
这个问题是Android Studio没有安装，但我是一名优秀的Android开发工程师啊，怎么会没有Android Studio呢，呵呵！
- 找到Android Studio的安装路径，输入命令flutter config --android-studio-dir="xxx"。
flutter config --android-studio-dir="xxx".png
- 最后再输入命令flutter doctor进行诊断，好嘛，新的问题来了，Flutter插件和Dart插件没有安装。
flutter doctor.png
- 打开Android Studio，File > Settings > Plugins，搜索框内输入flutter，然后点击Search in repositories。
search flutter.png
- 如果搜索不到插件，File > Settings > System Settings > Updates，检查 Use secure connection是否被勾选，如果被勾选则取消选择。
no plugin.png
- 搜索到插件后点击install，待下载完成重启Android Studio。
install flutter.png
- 重启Android Studio后可能会发现Flutter插件并没有安装成功，这个时候不要慌，这个坑已经替大家踩过了。我的Android Studio的bin文件夹下idea.properties文件被我改过了，改动的是idea.config.path和idea.system.path，因为他们默认的路径在C盘，为了节省C盘空间，故自定义到D盘中。网上说将idea.plugins.path=${idea.config.path}/plugins改为idea.plugins.path=${idea.system.path}/plugins就可以了，因为Dart和Flutter插件默认下载路径是.AndroidStudio\system\plugins，我试过了竟然不行。
idea.properties.png
- 暴力解决插件安装不成功的问题，首先进入到.AndroidStudio\system\plugins目录，可以看到Dart和Flutter插件的压缩包，然后将它们解压到当前目录，重启Android Studio，成功了。
Unzip plugin.png
- 再输入命令flutter doctor进行诊断，好嘛，还是提示没有安装插件。得，是在下输了，反正Android Studio中已经有了插件，先用起来。
flutter doctor.png
第一个Flutter应用程序
这才是最激动人心的时刻，老子填了这么久的坑，终于能玩起来了，废话少说，先搞一个跑起来，File > New > New Flutter Project。
- 选择Flutter Application，点击Next。
New Flutter Project.png
- 设置Project name等信息，与创建Android应用程序没什么区别，继续点击Next。
New Flutter Project.png
- 设置Package name，点击Finish。
New Flutter Project.png
- 创建完成
First Flutter Project.png
- 点击Run跑到真机上看效果，果然好惊艳哦。
flutter_app.png
最后
以上是我在Windows系统上安装Flutter遇到的一些问题，便拿出来分享，其中Flutter插件安装不成功的问题如果有童鞋遇到过，还望指教一二（抱拳）。
网友评论