Windows系统的Flutter环境搭建

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面

目录

 

环境搭建

系统要求

设置环境变量

安装Android Studio

拉取Flutter SDK

更新环境变量

执行flutter doctor

创建Flutter项目

运行Flutter项目


环境搭建

系统要求

这里以windows为例,就不讨论Xcode

  • Android Studio
  • Git(安装过程本次不做描述)

设置环境变量

由于Flutter的一些命令会从互联网上获取数据,而因为一些众所周知的原因,国内直接访问镜像是有一些问题的,所以谷歌为国内搭建了两个临时镜像,我们需要做的就是将这个两个镜像配置到环境变量中

右键我的电脑➡属性➡高级系统设置➡环境变量(配置在用户变量还是系统变量随意选择,用户变量只对当前用户有效)

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

安装Android Studio

选择Android Studio的原因是,安装完成后第一次启动会引导你进行Android SDK的安装,并且自带安卓虚拟机

下载Android Studio,安装过程基本是一直下一步(除了自定义安装位置),完成后启动

不需要引入任何设置

Windows系统的Flutter环境搭建

选择Cancel进入引导界面

Windows系统的Flutter环境搭建

中间步骤省略,就是一些选主题的,到这一步开始安装Android SDK,三个框全部勾选,下一步就会开始安装

Windows系统的Flutter环境搭建

 这里有一个需要注意的点:如果Android SDK是自定义安装路径的话,Flutter会找不到,所以需要将SDK的安装路径配置到环境变量中

Windows系统的Flutter环境搭建

Android SDK安装完成后,还需要安装两个支持Flutter开发的插件,Flutter和Dart

Windows系统的Flutter环境搭建

Windows系统的Flutter环境搭建

拉取Flutter SDK

git clone -b beta https://github.com/flutter/flutter.git (用这个网速实在是太慢)

所以建议先下载Flutter的github项目,下载完之后解压,然后执行上面的命令,将上面命令执行(不需要等待执行完)生成的文件夹里的.git文件拷贝到解压完成的文件里,再使用git pull来拉取会快一些

更新环境变量

确保Flutter SDK以拉取完毕后,再次添加环境变量,将Flutter的bin目录配置到path里,并将Git的bin目录也配置进去(也可不配,不过这样flutter doctor就只能再git bash里面运行)

Windows系统的Flutter环境搭建

执行flutter doctor

flutter doctor用于检测启动Flutter项目所需的依赖是否有缺少的,首次执行flutter会去互联网获取一些依赖,会慢一些,以后不会

如果Flutter和Git都配置再环境变量里了,那我们可以直接再cmd中执行

Windows系统的Flutter环境搭建

  • 第一个勾代表Flutter是有的
  • 第二个勾代表Android sdk是有的
  • 第三个勾代表Android studio是有的,并且插件也安装好了
  • 第四个勾代表IntelliJ IDEA是有的,不过插件没装完
  • 第五个勾代表当前还没有移动设备连接,Android Studio里的虚拟机启动了这个就会打上勾

这里的Android SDK可能还会出现没有license的问题,如下

[!] Android toolchain - develop for Android devices (Android SDK 28.0.3)
 ✗ Android license status unknown.

只要按照flutter给出的提示执行下面的命令,然后都选yes就行

flutter doctor --android-licenses

 

总之,前两个一定要满足,后面任意一个编辑器满足就行(支持:Android studio,IntelliJ IDEA,Visio Studio Code,Xcode),然后就可以去Android Studio里创建Flutter项目了

创建Flutter项目

由于安装Android Studio时,我们已经装好了需要的两个插件,所以Android Studio的界面会多一个创建Flutter项目的选项,第一次创建会让你选择创建一个虚拟机,按自己喜欢创建了就行

Windows系统的Flutter环境搭建

选第一个

Windows系统的Flutter环境搭建

之后就是填填名字,就能创建了

注意,创建完成后记得把Flutter SDK添加到Android Studio里面

File==>Settings==>Languages & Frameworks=>Flutter==>Flutter SDK path

Windows系统的Flutter环境搭建

运行Flutter项目

创建完成后打开项目里的pubspec.yaml文件,如果之前的插件是安装好了的,那么我们会看到flutter命令,点击Packages get或者自己再terminal中输入flutter packages get将包依赖项添加到应用程序中

Windows系统的Flutter环境搭建

然后启动安卓虚拟机,这两个地方都可以

Windows系统的Flutter环境搭建

注意,如果这里虚拟机启动报错,有两个原因

  1. 之前安装Android Studio时,没勾选Intel ® HAXM
  2. 没有再BIOS里开启英特尔虚拟化技术(Intel Virtual Technology)

如果虚拟机启动成功,选择main.dart,启动Flutter项目

Windows系统的Flutter环境搭建

启动成功后会再虚拟机显示如下界面

Windows系统的Flutter环境搭建