Flutter学习之旅——（1）配置环境，新建第一个项目

1.前言

在学习安卓之后，并完成一个上架app的项目后，很自然的将目光转向Flutter，在此记录Flutter的学习过程，不得不说，配置环境这一步痛苦至极，我这篇文章就尽量写一些我遇到的问题。

2.使用好Flutter自带的Flutter doctor

因为我是从安卓过渡到Flutter，所以我这边并没有安装VS，可能后续遇上问题还得安装，不过目前来说使用夜神模拟器来跑Flutter项目是没有问题的。

1. 安装Chrome浏览器

在官网下载Chrome浏览器，默认安装在C盘，但是我C盘内存已经要寄了，那怎么办呢？我们可以使用命令行映射到D盘里。

1. 确认C:\Program Files (x86)\Google\ 以及C:\Program Files \Google\ 下面没有文件夹Chrome：
   Chrome的默认安装路径为C:\Program Files (x86)\Google\，但是不知道为啥我的电脑有时也会安装到C:\Program Files (x86)\Google\去，确认完不存在Chrome文件夹后，我们在其他空余盘，如D盘建立D:\Chrome。
2. 打开命令行窗口实现映射
   输入 mklink /d “C:\Program Files (x86)\Google\Chrome” “D:\Chrome”
   接着输入 mklink /d “C:\Program Files \Google\Chrome” “D:\Chrome”
3. 接下来就在官网上下载Chrome浏览器即可

2.为Flutter SDK配置环境

主要分两步：

1. 更改环境变量
   在用户变量path里添加你所安装SDK的—— flutter\bin的全路径
   
2. 添加镜像
   同样在用户变量下，添加变量名为FLUTTER_STORAGE_BASE_URL，变量值为https://storage.flutter-io.cn
   
   接着添加变量名为PUB_HOSTED_URL，变量值为https://pub.flutter-io.cn的环境变量
   

3.Windows Version (Unable to confirm if installed Windows version is 10 or greater)——即不清楚该电脑是什么版本

对于这个，一般来说只要在命令行执行如下命令即可
flutter channel
flutter channel master
flutter upgrade
但是我的电脑卡在更新Dart版本这一步了

如何解决呢？这不外乎就是墙的问题了，那么就要使用镜像路径或者翻墙
而我们在第二步的时候已经配置好镜像了，一般都不会遇到如上问题。

4.接下来就是在AS安装两个插件Flutter和Dart

点击File-setting-plugin安装如下两个插件，后重启Flutter

5.新建Flutter项目

1. 点击File-New-New Flutter Project（这个是安装插件后出现的新按钮）
   
2. 配置Flutter SDK路径-点击Next设置项目配置
   
   对于安卓或前端有点了解的，这个就不必我多说了，这里只讲一点，就是项目名字必选是小写，这个好像是Dart的命名规则，不小写会报错 must be a valid Dart package name
3. 创建完毕后，那么在运行时我们经常会卡在Running Gradle task ‘assembleDebug’…
   不用多想，这也是墙的问题，那么我们就需要配置镜像路径了，关于这一步我是翻了不少博客拼拼凑凑在解决的，可能只适用我自己。
   首先我的环境是Window 10，夜神模拟器 7.0.5.5.
   然后打开项目android-build.gradle
   修改两处地方
   一、 buildscript{}
   /* google() mavenCentral()*/ maven { url = uri("https://maven.aliyun.com/repository/google") } maven { url = uri("https://maven.aliyun.com/repository/jcenter") } maven { url = uri("https://maven.aliyun.com/nexus/content/groups/public") }
   二、 allprojects{}
   
   /* google() mavenCentral()*/ maven { url = uri("https://maven.aliyun.com/repository/google") } maven { url = uri("https://maven.aliyun.com/repository/jcenter") } maven { url = uri("https://maven.aliyun.com/nexus/content/groups/public") }
   同时打开SDK目录 flutter\packages\flutter_tools\gradle\build.gradle.kts,同样进行修改
   
   在进行如上操作后，在点击run后，大概10秒后就能在夜神模拟器上看到Flutter 项目了
   

5.Error connecting to the service protocol: failed to connect to http://127.0.0.1:57051/ZX7k3lSucu4=/

不少人会遇到这个bug，但是在我升级夜神模拟器后就没遇上如上bug了，我也不太清楚是什么原因。

3.尾言

可能以上遇上的问题有缺漏或者多余的步骤，在之后的学习中，如果遇上其他问题，我会对本篇文章进行修改和添加。当然如果大家有问题的话也可以在评论区一起讨论下