Flutter系列 --- 环境配置

Flutter系列 --- 环境配置

本系列教程基本会以Windows来作为基底来写(原因是因为没有mac), 若有小伙伴需要MacOs的教程, 文中多少会提及一些，但是若在使用过程中有任何不妥的地方，请及时查看官方文档https://flutterchina.club>或...

配置镜像

由于Flutter是墙外的资源，所以这里我们需要配置一下国内的镜像，以Windows为例(当然如果你在用VPN的话，这一步可以跳过)

# 将下面的环境变量添加到用户环境变量里。参照下图
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# 注意这两个镜像为临时镜像，如若出现不能使用的情况，需要参考 Using Flutter in China <https://github.com/flutter/flutter/wiki> 获取有关镜像服务器的最新动态。

系统要求

要安装并运行Flutter, 您的开发环境必须满足以下最低要求

• 操作系统 windows7或者更高版本(64-bit)
• 磁盘空间 400 MB (不包括Android Studio的磁盘空间)

• 工具 Flutter 依赖下面这些命令行工具

  • GIT for Windows(Git命令行工具) https://git-scm.com/download/win

若已安装则可直接跳过

# 这里注意一点，有些人在安装完Git之后会出现无法在CMD或PowerShell执行Git命令，需要在环境变量Path中添加你的cmd的路径，看下图

获取Flutter SDK

1. 下载Flutter的最新可用安装包，有以下三种方式

• Flutter 官网 https://flutter.dev/docs/deve...
• Flutter Github https://github.com/flutter/fl...
• 去扫下面的两个二维码

1. 将安装包解压到你想要安装的路径

这里需要注意的是不要将Flutter安装到权限较高的文件夹里，比如C:\Program Files\

1. 在你安装Flutter的安装目录里找到flutter_console.bat，双击运行并启动flutter 命令行,就可以在Flutter的命令行里运行Flutter命令了。

上面是官方的说法，其实你安装了之后只需要配置环境变量即可在各种终端运行Flutter命令了。这里需要注意的点是，Flutter的一些命令是需要联网的，如果你没有按照第一步配置国内镜像的话，你要有一个可靠的vpn才能确保命令的顺利执行。

Flutter Doctor

Doctor的命令主要是用于检测当前环境是否还需要安装其他依赖

# 注意此命令暂不支持在git bash这样的第三方shell执行。
flutter doctor

在终端窗口中黑体加粗的为当前需要安装的软件或者是需要进一步执行的任务。

例如

[-] Android toolchain - develop for Android devices
    • Android SDK at D:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.

下方为全部安装正常的

编辑器

多家编辑器都为Flutter提供了IDE的支持。比如:IntelliJ IDEA、Android Studio、VS Code。这里只对Android Studio和VS Code进行插件和安装讲解。

Android Studio

1. 下载Android Studiohttps://developer.android.com...

此页面也是需要翻墙的，如果没有vpn的同学可以直接用下面提供的工具包里面的Android Studio。也可以自行和度娘取。

1. 启动Android Studio,执行向导下载最新的Android SDK、Android SDK平台工具、Android SDK下载工具。如果你是从官网下载的话，一路下一步即可。 如果你是从度娘下载的话，建议下载包含SDK的安装文件，因为在下载与SDK相关的东西过程中也是需要翻墙的。

这里注意的是Flutter默认使用的Android SDK的版本是基于你的adb版本的。如果想使用不同版本的话，需要手动修改ANDROID_HOME环境变量为SDK的安装目录。其次，Flutter应用的最低版本为Android 4.1(API level 16)或更高的Android设备。

这里模拟器设置不做多讲，因为因人而异，喜欢什么版本的选择什么版本即可，傻瓜式图像式引导操作。只是需要注意的是需要打开VT，这样你的模拟器在执行速度上会有质的飞跃。具体打开方式自行度娘。

1. 下载Flutter、Dart插件。

其实在安装Flutter插件的时候就会提示你需要一并安装Dart插件的，点击同意就会合并安装。具体安装方式见下图。(记得重启之后才生效)

VS Code

1. 下载VS Codehttps://code.visualstudio.com/(主要需要1.20.1及以上的)
2. 打开VS Code => 快捷键ctrl + shift + P => 输入Extensions: Install Extension(其实直接侧边栏点击插件即可)
3. 搜索Flutter下载即可。

以上我们的环境配置工作就完成了，让我们来先下载官网的一个小栗子来体验一下吧。

体验你的第一个Flutter

以VS Code为例，但是我们都需要先预先链接我们的手机或者是打开我们的模拟器。

1. 打开VS Code => 快捷键ctrl + shift + P => 输入Flutter: New Project
2. 选择你要存放的位置，回车，等待项目初始化完成。
3. F5 或 Debug -> Stary Debugging
4. 正常跑起来之后则为上述的图片样子
5. 这里Flutter为我们提供了热重载的功能，可以快速开发。和webpack的热重载很相似、你可以将yourpath/lib/main.dart里的'You have pushed the button this many times:'更改观察你的手机或者模拟器的变化。

下一节主要创建一个应用用来学习Flutter的相关知识。

资源

后台回复Flutter Tools获取文中的Flutter和Android Studio下载

注：本文主要以Flutter官网的文档为主编写，如有侵权，请联系~~

你也可以关注我的微信公众号: 混日子码农