flutter开发环境搭建

Flutter支持三种环境：Windows、macOS和Linux。此教程以windows10系统为例子，是小白看的傻瓜式教程，行内人可能觉得罗里吧嗦，见谅见谅。下面就是具体步骤（其中包括安卓环境搭建）

1.镜像配置

首先解决网络问题。环境搭建过程中需要下载很多资源文件，当某个资源更新不成功时，就可能会导致后续报各种错误。在国内方位Flutter有时会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cns

最新的配置查看文档 https://flutter.dev/community/china
具体步骤：

1.1 打开计算机的控制面板->系统与安全->系统

1.2 打开高级系统设置

1.3 打开环境变量

1.4在系统变量中新建变量

1.5 两个变量分别输入变量名和值，再点击确定保存

2.下载安装Flutter SDK

去Flutter官网https://flutter.dev/docs/development/tools/sdk/releases下载Windows最新可用的安装包。将安装包zip文件解压到你想要安装Flutter SDK的路径。注意不要将Flutter安装到需要一些高权限的路径，如 C:\Programe Files\。具体步骤：

2.1 打开官网，选择最新版releases版flutter SDK进行下载

文件大概几百MB，需要耐心等待。

2.2 将下载的压缩包解压到指定路径，用来存放flutter SDK文件

下载完成后打开该压缩包文件，可以看到只有一个flutter文件夹，而flutter文件夹里包含许多SDK内核文件和目录，其中有bin目录，在bin目录下可以执行flutter的操作指令。我们把整个flutter文件夹解压到指定目录，这里我选择解压到D盘目录。

2.3 把flutter SDK路径加到系统环境变量得Path下

这样做得目的是在cmd上使flutter命令能执行在flutter SDK目录外使用，还便于计算机的其他应用找到flutter SDK的位置。具体做法为按1.1中的步骤打开环境变量，在系统变量中找到系统自带的变量名为Path的变量，点击编辑。

可以看到Path变量里含有许多系统自带的属性，有我们新建一个属性，属性里填写上一步骤中解压下来的flutter SDK文件夹所在的本地路径，注意要写到bin目录下，比如我把flutter SDK直接放在D盘下，我的属性即为：“D:\flutter\bin”。完成后点击确定保存配置。


完成后，新增后的Path环境变量就比原来多出了flutter SDK bin目录的路径，这样就表明环境变量配置成功。

3.配置安卓环境

Windows系统只能开发Flutter的Android应用，Flutter底层需要去调用Android SDK，所以就需要Android Studio提供安卓环境。配置安卓环境的具体步骤是：
3.1 下载并安装Android Studio
打开Android Studio的中文官网https://developer.android.google.cn/studio进行下载。

点击下载，完成Android Studio安装包的下载。

下载完成后运行该可执行文件，打开安装包


安装可以全部默认，一直点击Next下一步。

安装路径可以根据个人选择



安装完成后自动打开。

3.2 Android Studio初始化设置和Android SDK的安装

刚安装完打开后是这样的界面：

如果电脑之前安装过Android Studio，一般都选择Do not import setting。

打开后会提示没有安装安卓SDK，这里我们不选择Proxy代理，选择Cancel取消，然后可以进入初始化设置引导。



以上都是Android Studio的界面设置，可以根据个人风格设置。下一步是安装安卓SDK。

一般我们选择默认最新的配置，点击完成，就可以进入SDK下载页面。

安装过程中可能需要计算机执行一些批处理文件，若出现响应的提示选择允许即可。2MB/s网速大约15min，需要耐心等待。

安卓SDK安装完成，下面可以运行Android Studio了，运行后界面是：

点击Configure->SDK Manager设置可查看安卓SDK的安装情况：


可以看到，我们是已经下载Android11®的API版本，当前(2021.05.01)来说一般都下载Android11®或Android10(Q)。

3.3 配置Android SDK环境变量

按1.1中的步骤打开环境变量。

找到自己电脑中的安卓sdk，里面有两个文件夹，platform-tools和tools，将这两个文件夹的路径添加到变量值里面，中间用分号隔开（注意分号是英文形式）。按我们教程的步骤来的话，我们安卓sdk安装的路径在步骤1.3.2的第六张截图里有，如下图。

Windows安卓SDK默认安装到C:\Users(或用户)\user(主机用户名)\AppData\Local\Android\Sdk
其中AppData是隐藏文件夹，需要在资源管理器手动输入AppData才能进入查看。下面解释一下如何进入隐藏文件夹。



而本人的安卓SDK并非放在C盘用户个人文件下，而是放在E盘。我们找到platform-tools和tools这两个文件夹。

在系统环境变量中创建一个名为“ANDROID_HOME”的环境变量，把Android sdk的路径作其变量值。

找到并选择Path环境变量编辑，变量值新建“%ANDROID_HOME%\platform-tools”和“%ANDROID_HOME%\tools”。

最后，打开cmd，输入adb如果出现下面的内容就表示设置环境变量成功。

3.4 新建安卓项目

下面我们来新建一个安卓项目检测一下安卓环境的配置。返回主界面选择Create New Project。

选择合适的界面布局和填写新建项目基本信息。


Finish完成后，将会进入主界面。

安卓项目一般是Gradle工具自动构建的，新建的安卓项目里默认加入了Gradle的依赖和配置。



如果build过程中遇到"unable to find valid certification"这一问题可以去下面这个博客解决：https://blog.csdn.net/qq_35101450/article/details/101533780。
但如果你是联想的机子，建议重装系统，联想机自带的联想系统上这个证书问题很难解决，需要重装一个非联想的操作系统。

3.5 安装安卓模拟器，运行新建的安卓项目

Gradle加载成功后就可以构建运行项目，但是前提得有移动设备，计算机上我们可以设置模拟器，当然，也可以用安卓的真机进行调试。

我们先打开Android Studio的模拟器管理（Android Virtual Device Manager）。

最初列表中没有模拟器，需要新建一个模拟器，点击Create Virtual Device。

选择一个模拟器Phone的型号，下一步。

点击Download下载该模拟器。


完成后，在虚拟器管理列表中就可以看到该虚拟器。

点击三角符号运行虚拟器，或者在主界面模拟器栏选择run on Multiple Devices->Run运行虚拟器。

点击绿色三角符运行，等待Gradle构建项目，如果运行成功，模拟器上能运行项目生成的app，表示安卓环境正常。

3.6 安卓真机调试

4. flutter环境检测

在完成了步骤1.2后，每执行完一步操作，都可以在cmd命令行上执行flutter doctor，来检测flutter环境是否搭建好了。完成了1.3后，正常来说，flutter doctor的结果是这样的如图：

[√] ①Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.19041.928],
locale zh-CN)
[√] ②Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[√] ③Android Studio (version 4.0)
[√] ④VS Code (version 1.55.2)
[!] ⑤Connected device
! No devices available
①是flutter SDK的安装和配置，对应本教程的步骤1.2。
②是Android SDK的安装和配置，对应本教程的1.3.2和1.3.3。
③是编译工具Android Studio IDE的安装，对应本教程的1.3.1。
④是编译工具VSCode的安装，对应本教程的1.5.2。（下载了VSCode和安装了flutter插件才会有）
⑤是连接移动设备，可以是手机模拟器，可以是真机连接电脑，因为当时没有打开模拟器或连接手机设备，所以⑤提示Connected device No devices available的警报。
注意，完成步骤1.3后第一次flutter doctor会有关于liscense证书方面的警告，如图：

此时，我们需要执行“flutter doctor --android-licenses”，接下来所有的提示输入“ Y（Yes）” 即可。

5.编译器选择

Windows系统下，对于flutter编程，我们通常选用的编译器是Visual Studio Code。当然，Android Studio的功能更强大，但是Android Studio毕竟是针对安卓原生开发设计的，所以，对安卓底层不熟、没有安卓原生开发经验的flutter开发者，我建议选择VSCode。

5.1 Android Studio上开发flutter

首先，下载Android Studio的flutter插件和dart插件，一般flutter插件和Dart语言插件是绑定在一起的，下载了其一即可包含另一个。具体步骤是打开File->Setting。

再点击Plugins（插件）。

搜索flutter和Dart插件，并下载。

然后，就可以新建flutter项目了，点击File->New->New Flutter Project。


选择Flutter Application，Next下一步。

初始化项目，其中Flutter SDK path一定要选1.2步骤安装的Flutter SDK。

设置包名，Finish完成。

代码都是以dart语言编写的。dart语言类似javaScript，是面向对象语言。如果你有Java、JavaScript和C++的基础，此语言对你是简单易学的。可以在https://book.flutterchina.club/chapter4/row_and_column.html 《Flutter实战》电子书中的1.4Dart语言简介进行简单的学习。

此项目目录是flutter项目工程的初始化项目，不是HelloWorld，而是一个计数器（按一下显示的数字会加一）。主要代码放在lib目录下，其中main.dart是程序的入口，在小型项目中，main.dart可能会写app的首页或者登录页等；在大型项目中，main.dart文件里一般写项目的全局配置，具体的模块和页面都是在另一个文件另起一个类来写，然后通过路由管理和状态管理注入main.dart里。目录中还有一个pubspec.yaml文件，这个是flutter注入flutter SDK、Dart核心、第三方包的配置文件。除了lib其他的文件和目录，初学者可以先不用了解。
下面是运行项目。直接运行是绝对报错的，因为Android Studio的编译机制不识别Flutter项目，但是，它识别flutter标准项目目录下的android目录。

我们可以用这个窗口重新打开这个内嵌在flutter项目里的安卓项目。File->Open


选择本flutter项目下的android文件夹，点击OK。

可以选择这个窗口打开This Window，也可以另外打开一个Android Studio打开该安卓项目。

这样就变成安卓项目了，Android Studio可以编译构建了，原来的flutter项目也就可以运行了。当然运行需要模拟器或真机，可以按步骤1.3.5打开模拟器。打开模拟器后，点击绿色三角符运行，Android Studio会自动用Gradle工具构建项目，点击任务栏的Build可以查看进度。

运行成功后，模拟器会自动打开该app。

5.2 Visual Studio Code上开发flutter

首先，下载Visual Studio Code，可以上官方网站上下载，也可以在各大软件助手和软件商店都有下载，选择一个合适的版本下载。下面提供两个网站，具体的安装过程这里就不提了：https://code.visualstudio.com/和https://vscode.en.softonic.com/。

下载完成后，我们在VSCode的插件社区里下载flutter插件和Dart插件。打开VSCode，打开“查看->扩展”。

搜索flutter和dart，选择搜索列表中第一个插件，点击安装。也可以安装其他有关flutter的插件，如Awesome Flutter Snippets插件可以提供很多常用组件的代码样板等。插件安装完重启VSCode才会生效。


然后需要创建flutter项目，打开VSCode，按Ctrl+ (在Tab键上方的“~”键)进入终端，或者打开导航栏“终端->新终端”进入终端，通过命令行的操作命令进入你想要创建新项目的本地目录，输入命令：flutter create myapp 创建flutter项目（myapp项目名称）。也可以不打开VSCode创建项目，直接在cmd命令行上打开想要项目放置的位置，执行flutter create myapp命令，这种方式直接调用flutter SDK创建项目。

然后在VSCode中打开该文件夹（myapp文件夹）。

选择刚刚创建的文件夹myapp。

打开该项目后，即可运行，运行前需要打开模拟器，VSCode是可以直接使用在Android Studio安装的模拟器的，我们点击右下角No device。

上面就会出现输入框。

因为本人在Android Studio创建并使用过这个Pixel3a的模拟器，所以VSCode可以检查到，我们直接选择该模拟器，点击Start Pixel…启动模拟器。启动后，右下角No device变成模拟器的名称，表示模拟器启动成功。此时我们执行步骤1.4中的flutter doctor，检测就全部通过。

模拟器启动后，有两种方式运行项目：
①VSCode flutter&Dart模式调式程序。按上两张截图红框提示运行项目，也可以点击导航栏上“运行->启动调试”运行。

等待Gradle工具成功构建完成‘assembleDebug’任务后，即运行成功。

下面这个是在VSCode flutter插件生成的调试栏，闪电标志的是“热重载”功能，可以在修改代码程序后不用重新运行项目就可以实现页面渲染的改动。

②在命令行终端项目的根目录（myapp）下执行“flutter run”运行。
可以在VSCode自带的命令行终端里执行。

也可以在cmd命令行，执行flutter run来运行。

运行成功后，可以在命令行输入小写r执行热加载刷新当前页面操作，大写R热加载刷新整个App，Q可以看到flutter组件的布局线条，如下图：