Flutter开发环境Window下搭建Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量

1.前言

前言废话可以不看，直接从安装环境开始看

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter在性能方面也是号称可以与原生媲美的。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

虽然Flutter也有一些跨平台开发框架的通病，在开发过程中必不可少的要与原生代码互相调用，我一个前端哪知道什么是UIViewController，什么是Activity呢？我要是双端都熟悉，学习Flutter就显得很没有必要。

好了废话不多说了，我们开始搭建环境吧！

2.java环境安装

2.1 做基于android的原生app，首先需要安装java环境

链接: pan.baidu.com/s/1PMYNClav…

提取码: adkv

这里是window下的安装包，下载后直接安装就可以了。注意这里有坑建议使用我网盘中提供的java安装包版本，如果是其他版本的java安装包可能会出现问题。

2.2 快捷键`window + r`输入`cmd`打开cmd窗口输入`java -version`回车如果出现版本号就表示安装成功

2.3 如果没有出现版本号,那就需要配置环境变量了(安装成功就可以跳过此步骤)

2.3.1 右键点击我的电脑-属性-高级系统设置-高级-环境变量

2.3.2添加`JAVA_HOME`到系统环境变量

JAVA_HOME

D:\Program Files\Java\jdk1.8.0_152

2.3.3给系统环境变量`Path`中添加`%JAVA_HOME%\bin;`,如果没有Path可以新建一个环境变量

2.3.4最后再次打开cmd查看java版本,如果还不行就重启电脑

3 设置Flutter镜像

在使用Fultter指令时，有些时候会联网下载依赖资源。在国内通过Flutter访问网络有时会不稳定，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中

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

此镜像为临时镜像，并不能保证一直可用，读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。

4 安装FlutterSDK系统要求

要安装并运行Flutter，您的开发环境必须满足以下最低要求(不包括安装Android Studio的空间):

操作系统: Windows 7 或更高版本 (64-bit)
磁盘空间: 400 MB (不包括Android Studio的磁盘空间).
命令行工具: Git for Windows和Windows Power Shell
- 如果已安装Git for Windows，请确保命令提示符或PowerShell中运行 git 命令，不然在后面运行flutter doctor时将出现Unable to find git in your PATH错误, 此时需要手动添加C:\Program Files\Git\bin至Path系统环境变量中。

5 安装Flutter SDK

5.1 下载Fullter安装包

在Fultter官网上下载最新可用安装包，最好使用stable稳定发布版

JDK, Flutter Windows SDK

5.2 解压安装包

将下载后的安装包解压，路径中最好不要有中文和空格，不要使用系统中需要高授权的路径

5.3 配置环境变量

在系统环境变量Path中添加D:\flutter\flutter\bin;的完整路径,注意每个环境变量之间要以;分割

5.4 运行flutter doctor指令检查依赖

目前只能在命令行提示符(cmd)或Windows Power Shell中执行flutter doctor指令。

第一次运行flutter doctor指令时，它会下载它自己的依赖项并自行编译，时间可能较长。如果没有在3小节配置flutter的镜像环境变量，指令可能运行失败。

这个时候会检测出很多的错误,那是因为我们还没有配置Android SDK和相关插件

6. 下载和安装Android Studio

如果不想使用Android Studio作为开发工具的可以跳过,直接进入7小结(电脑配置比较高的话建议下载Android Studio来配置Android SDK)

Android Studio官网下载地址

下载后正常安装即可，安装路径不要有中文和空格。启动Android Studio，然后执行“Android Studio安装向导”。这将安装最新的Android SDK，Android SDK平台工具和Android SDK构建工具，这是Flutter为Android开发时所必需的

依赖检查
打开Windows Power Shell运行“flutter doctor”检查依赖，可以看到Android Studio和Android SDK(如果任显示Android SDK有问题请看7小结)已经安装，但提示缺少“Flutter”和“Dart”两个plugin（插件）。

7. Android SDK安装

如果6小结安装完全正常,可以跳过7小结

7.1 Android SDK安装工具:

链接: pan.baidu.com/s/12OMPV5kq…

提取码: 3yqr

注意：安装(解压)路径上不要有中文和空格

如果真机调试程序可以不安装System Image以节省安装时间

运行SDK Manager.exe下载Android开发环境，点击“Install x packages”进行下载安装

选择“Accept License”并点击“Install”进行安装

等待安装进度完成

安装完成，所选项的status变成“Installed”

配置ANDROID_HOME环境变量
在“环境变量”的“用户变量”中新建变量“ANDROID_HOME”，将Android SDK的安装路径设置为变量的值

在“环境变量”的“用户变量”中的Path中追加路径

%ANDROID_HOME%\tools
%ANDROID_HOME%\platform-tools

7.2 Flutter中确认Android SDK安装

打开Windows Power Shell执行指令"flutter doctor"

发现已经获得到了Android SDK的版本，但提示一个错误“Android license status unknown”。其指的是“没有接受Android的许可”

执行指令"flutter doctor --android-licenses"

如果提示多个确认（y/n）,请一直输入“y”至结束
如果提示如下图

请输入提示"地址+.bat --update"。
上图输入的就是"D:\Android\android-sdk\tools\bin\sdkmanager.bat --update"
此时会提示选择“y/n”，输入y后回车确认，可能需要等待一小段时间。

重新执行指令：”flutter doctor --android-licenses
应该不会再出现“Android license status unknown”错误

如果问题仍然存在
可能出现根据下图所示可能是移除tools文件夹时出现问题

解决办法 来到路径指向的文件夹，将其中tools更改为tool。

在Windows Power Shell中执行指令“D:\Android\android-sdk\tool\bin\sdkmanager.bat --update”，等待系统生成新的tools文件夹和其中的内容，这可能会花费一段时间。

注意: 此时如果出现找不到java包的问题,那就是你安装的java的版本不对.找到2小结我提供的javaJdk重新安装

在Windows Power Shell中重新执行指令flutter doctor --android-licenses
会提示多次选择(y/n)的操作，一律输入"y"

全部确认后，重新执行指令flutter doctor
可以看到错误“Android license status unknown”消失。

8. 下载Flutter和Dart插件

8.1 使用Android Studio开发

8.1.1 使用Android Studio安装插件

打开“Configure”->"Plugins"

搜索dart，建议先安装dart插件，再安装flutter插件。由于网络不稳定原因，搜索可能会支持一段时间或者提示没有搜索到结果。请耐心多试几次。
也可以通过访问网站下载离线安装包
plugins.jetbrains.com/androidstud…
下载离线安装包时请确认好IDE与安装包的版本是否吻合
通过点击“Get Help”中的“About”来确认版本

在网站上选择合适的版本下载(更细致的版本号请忽略)

下载好离线安装包后，通过点击“齿轮”中“Install Plugin from Disk”，选择下载好的zip文件即可安装

检查安装后的插件，确认后重启Android Studio

检查依赖
打开Windows Power Shell，输入“flutter doctor”检查依赖。发现插件错误也解决了。

8.1.2 创建flutter项目

安装Dart和Flutter插件后，重启Android Studio看到可以创建Flutter工程

点击“Start a new Flutter project”创建一个Flutter工程
选择工程类型
第一个是App应用
第二个是插件开发
第三个是Widget（组件）开发
第四个是为Android或IOS的APP提供Module

工程名字
选择第一个App应用开发后，点击“Next”，填写工程名字等基本信息

package名字
填写工程名字后，点击“Next”，填写package名字

点击Finish完成创建，进入编辑页面

工程目录结构
main.dart是核心启动文件

8.1.3 联机调试

工具台

真机联调
通过手机连接USB进行调试，首先要确保在Android SDK Manager中安装了“Googel USB Driver”

通过USB连接手机，在手机上的设置中打开“开发者选项”和其中的“USB调试”。等待计算机安装手机驱动后，如果工具台还显示“”，请重启Android Sutdio

在Widows Power Shell中执行“flutter doctor”，发现没有问题存在

8.1.4 执行程序

点击“执行”

运行效果

设备连接异常

是否为“文件管理”模式
是否打开了“开发者选项”
是否打开了“USB调试”
是否正确的安装了的手机驱动
打开cmd，是否能正常执行adb指令，若adb指令提示缺失“api-ms-win-crt-runtimel1-1-0.dll”。在windows7 sp1操作系统中，需要vc环境支持，需要下载vc_redit.exe www.microsoft.com/zh-cn/downl…

gradle异常
运行时如果 Initializing gradle时出现异常如

"xxxx\gradlew.bat" exited abnormally (xxxx为路径)

根据提示的网址下载zip包并放入异常指向的目录即可
一般目录为：C:\Users\计算机用户名.gradle\wrapper\dists\gradle-4.10.2-all\9fahxiiecdb76a5g3aw9oi8rv（可能是其他的序列）

adb.exe已停止工作

在使用真机调试的时候碰到了adb.exe 已经停止工作的错误。由于adb的默认端口5037，被其他程序占用了。
在cmd中输入 netstat -ano|findstr "5037"，寻找占用5037端口的PID
在任务管理器中寻找PID为5037的进程，结束进程或卸载相关程序即可。

8.2 VSCode安装flutter,dart插件

8.2.1 安装插件

打开VSCode查找并安装扩展flutter和Dart(安装flutter插件时默认会把dart插件也安装上)

后使用ctrl+shift+p调出命令面板, 然后选择 Flutter: New Project, 创建项目, 没有错误就行。Android Studio不用管。

8.2.2 启动项目

通过USB连接手机，在手机上的设置中打开“开发者选项”和其中的“USB调试”。
此时vscode在下图标记位置会显示链接设备的名称

进入项目，使用flutter run可以执行。