Flutter开发环境Window下搭建

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.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 执行程序

点击“执行”

运行效果

设备链接异常

1. 是否为“文件管理”模式
2. 是否打开了“开发者选项”
3. 是否打开了“USB调试”
4. 是否正确的安装了的手机驱动
5. 打开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能够执行。

设备链接异常

1. 是否为“文件管理”模式
2. 是否打开了“开发者选项”
3. 是否打开了“USB调试”
4. 是否正确的安装了的手机驱动
5. 打开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的进程，结束进程或卸载相关程序便可。