Flutter配置环境、运行helloword项目

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。我们将在这里揭开他可爱而神奇的面纱。

学习讨论QQ群：936799301

学习适合人群

• 前端爱好者：希望升级技能，掌握全端开发的技术。
• Flutter从业人员：Flutter从业人员一定也可以学到很多知识。
• 移动开发爱好者：想从事移动开发，但是还没有入门的新手。

Flutter优势

• 跨平台： 现在Flutter至少可以跨4种平台，甚至支持嵌入式开发。我们常用的有Linux、Android、IOS，甚至可以在谷歌最新的操作系统上Fuchsia进行运行,经过第三方扩展，甚至可以跑在MacOS和Windows上，到目前为止，Flutter算是支持平台最多的框架了，良好的跨平台性，直接带来的好处就是减少开发成本。
• 原生用户界面： 它是原生的，让我们的体验更好，性能更好。用官方的话讲就是平滑而自然的滑动效果和平台感知，为您的用户带来全新的体验。（可以看一下图片，这是Flutter的表现）
• 开源免费： 这个不用多说，我们只要学会并使用，这些都是免费的。这对于大公司是非常必要的，有人说你可以用破解版什么的…说明你还是小公司，我们公司的软件全部是正版，就更不用说操作系统和生产环境了，否则各种公司的侵权官司你都解决不了。

120fps超高性能

Flutter采用GPU渲染技术，所以性能极高。

Flutter编写的应用是可以达到120fps(每秒传输帧数),这也就是说，它完全可以胜任游戏的制作。而我们常说的RN的性能只能达到60fps，这也算是Flutter的一个超高竞争力吧。官方宣称Flutter甚至会超过原生性能。

如果你想迈入移动游戏领域，学习Flutter也是一个非常好的选择。

Flutter生态情况

由于有google这样的超级公司支持和推广，Flutter虽然刚出来没有多久，但是生态还是非常好的，中国也有了大量的Flutter爱好者。

我们先来看一下Flutter的插件情况。由法国人总结了一个Flutter的插件列表，我们可以打开看一下，里边的插件非常丰富。所以完全没有必要为Flutter的生态环境而担忧。

github地址：https://github.com/Solido/awesome-flutter

Flutter开发环境搭建Windows版

1.JAVA环境的jdk安装

点击下载 1.8版本 jdk https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

下载完成之后，双击安装，下面是我的安装目录，后面要配置环境变量。

image

右键 我的电脑->属性->高级系统设置-> 环境变量，先配置 JAVA_HOME 然后配置 PATH,不要配置classpath啥的，那都是过去的配置方法了。

image

配置好环境变量后 cmd 中输入如下命令，表示配置好了，否则重新检查配置。

image

2.Flutter下载配置

去官网下载Flutter安装包，下载地址:https://flutter.io/sdk-archive/#windows

本文编写的时候，最新发布版本为1.2.1，下载后解压到不带有中文路径的文件夹下，然后配置环境变量。

image

配置好环境变量后，执行命令 flutter --version 表示配置成功

image

因为flutter需要联网，所以还需要配置如下环境变量 FLUTTER_STORAGE_BASE_URL 、 https://storage.flutter-io.cn

image

3.AndroidStudio安装与配置

国内下载地址，迅雷下载网速更佳 http://www.android-studio.org/ androidstudio 以下简称as

image

这个安装包是没有sdk，安装完androidstudio，打开的时候提示是否下载sdk，选择是，他会自动下载，国内下载的话，速度还是很快的。

安装好后，需要在as中安装flutter的插件，设置然后按照下图步骤搜索安装，我这已经是安装过后的 ，安装后记得重启as。

image

在命令行运行 flutter doctor 如果不是绿色的，表示存在问题，如图选中的这个，是开发证书的问题，执行他提示的命令就能解决问题。最后一个表示没有虚拟机，我们这里不打算用它自带的模拟器，使用genymotion，这是android开发最手欢迎的模拟器，如果有真机最好用真机。

image

4.配置gradle

as默认使用新一代代码构建工具gradle，新建项目的时候他会默认去在线下载，超级超级慢的，所以提前下载一个离线版的，用迅雷下载速度更佳 http://services.gradle.org/distributions/ ，尽量下载最新版。

然后需要配置一下环境变量，不然你会后悔的 ： GRADLE_HOME 和 GRADLE_USER_HOME。 GRADLE_HOME 是gradle的解压目录，GRADLE_USER_HOME是下载jar包的位置，默认放C盘哦。

image

5.安装genymotion模拟器

genymotion模拟器现在是android开发必备模拟器，启动速度快等。http://www.genymotion.net/ 注册下载免费版

然后需要在as中安装插件，请参考我的另一篇文章 https://www.aiprose.com/blog/29

不同android版本的模拟器，需要下载镜像文件，如果下载特别慢或者经常失败的话，请参考我的另一篇文章，快速下载镜像文件https://www.aiprose.com/blog/30

6.新建项目

新建项目，选择 flutter project

image

image

项目新建成功后，我们需要编译安装到模拟器或者手机上，这时候我们需要修改一下默认的maven仓库地址，记住一定要下载离线的gradle，并配置环境变量，在线下载真的是超慢超慢。

        maven { url "http://maven.aliyun.com/nexus/content/groups/public/" }        jcenter()        maven { url "https://jitpack.io" }        google()

image

点击运行按钮，第一次有点慢，因为要下载依赖的安装包，我这里连得是真机，可以看出120fps不是吹的，特别流畅。

image

运行界面

image