Flutter环境安装与开发

最近研究学习flutter 开发,这是一款开发app利器,能同时兼容安卓和IOS两个版本,大大节约了开发成本和维护成本,它是基于Dart语言,个人觉得对于安卓开发,flutter 几乎相当于原生开发,所以性能上要远远高于之前 的非原生开发工具。下面来看一下安装步骤,由于很多地方是国外的资源,需要或者做镜像,所以里面会有很多坑,我把自己的安装过程呈现一下,希望大家少采坑。

安装需要的软件

1 java sdk

2 flutter

3 android studio

安装步骤:

1 安装java sdk

我安装的是 jdk-8u40-windows-x64.exe ,对于Java 的版本没有很严格的要求,只要是JAVA SE 的环境都可以,安装后,进入cmd 命令行,输入java 回车后 会有一堆命令的提示,这就说明JAVA环境安装成功了

2 安装flutter

我下载的是 flutter_windows_1.22.2-stable,flutter 免安装的,只要解压到你想安装的目录即可,然后将flutter 目录下的bin 目录设置为环境变量,

环境变量的设置如下:

1 右键我的电脑->属性,进入下面的界面,然后选择 高级系统设置,点击【环境变量】,进入设置界面

2 找到环境变量path,点击【编辑】进入设置界面后,点击【新建】(如下图)

3 复制flutter 解压目录里的bin 目录 我的目录是:D:\flutter\flutter_windows_1.22.2-stable\flutter\bin,将这个目录粘贴到环境变量中,效果如下图:

环境变量设置完成后,进入cmd命令对话框,如果之前已经打开cmd 了,必须关闭后重新打开,在对话框中 打flutter doctor 回车,检查flutter是否安装成功,这个过程需要一点时间,稍微有点慢,所以等待一下

如上图,flutter doctor 会提示哪个是没有安装的,就是前面打x 部分,下面我们来安装androd studio

3 androd studio 安装

安装androd studio 前要设置两个环境变量,因为Android studio 需要下载一些程序包,需要,所以设置这两个环境变量后,就可以下载国内的资源了

PUB_HOSTED_URL https://pub.flutter-io.cn

FLUTTER_STORAGE_BASE_URL :https://storage.flutter-io.cn
设置之后如下图:

androd studio 安装比较简单,只要下一步下一步就可以了,我安装的版本是androd studio4.1 ,安装后启动,如下图,点击右下角的 Configure->plugins,进行安装flutter 插件安装

进入plugins 后 搜索flutter,点击【install】,等待一段时间,有时候可能因为网络原因,可能会慢,请耐心等待,安装成功后重启Android studio

重新进入cmd 命令行,执行 flutter doctor 命令,你可能发现没什么变化,还是那么多的X,这是主要原因是Androidstudio升级到4.1之后 安装pluging路径变了导致我们使用 flutter doctor命令之后 flutter检测不到,虽然还显示X ,但不影响使用,其实都已经安装成功了

原因为AS4.1还未兼容Flutter stable,须手动切换到dev,如果有强迫症的同学,可以使用

flutter channel dev
然后执行

flutter doctor -v
下载完后执行

flutter doctor

可以看出 现在只有一个Android licenses 没有安装了,执行

flutter doctor --android-licenses
然后一路 yes,安装完成即可,再flutter doctor 一下,就全通过了

j

接下来启动anroid studio,新建一个flutter 项目

点击【next】,设置flutter SDK path 就是flutter安装的目录,project location,设置你的flutter 项目的文件保存的目录

然后点击【next】,进入下一个页面,如下图,下面的两个复选框是不用选中的,然后点击【finish】,就创建成功了

创建成功后,修改项目的镜像问题,在android 文件夹下的biuld.gradle 文件,有两个地方放需要改: 就是有goole() 和jcenter() 两个函数的地方,把这两个函数注释掉,然后加上镜像地址(三个),两个地方大概第3行和第16行的地方,如下面两个图:

//google()
//jcenter()
maven { url ‘https://maven.aliyun.com/repository/google’ }
maven { url ‘https://maven.aliyun.com/repository/jcenter’ }
maven { url ‘http://maven.aliyun.com/nexus/content/groups/public’ }

此外还要修改两个文件

(1)flutter安装目录下/packages/flutter_tools/gradle/flutter.gradle 文件,修改方法和上面的一样,将flutter.gradle 文件用记事本打开,将google() 和jcenter() 方法注释掉,然后将三个镜像的地址加上即可。

(2)flutter安装目录下/packages/flutter_tools/gradleresolve_dependencies.gradle文件,将镜像地址改成 :http://download.flutter.io ,如下图所示:

镜像文件修改完成后,接下来需要启动手机的虚拟机,在android studio 点击【tools】

点击【create Virtual Device】,选择需要的机型

点击download,下载,这个需要一段时间,等待下载完成。

安装完成后点击运行

启动后会出现一个手机的模样

然后点击debug 按钮,就能运行刚才创建的flutter 程序了

运行效果如下:

至此,flutter 的环境就已经配置好了,就可以开启你的flutter开发之路了!

你可能感兴趣的:(前端,flutter)