Flutter学习之旅——(1)配置环境,新建第一个项目

133 阅读3分钟

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,变量值为storage.flutter-io.cn 在这里插入图片描述 接着添加变量名为PUB_HOSTED_URL,变量值为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.尾言

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