Flutter配置环境、运行helloword项目

头像
码农笔录
2019-03-16 移动开发 阅读量 12346

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

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


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


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



2.Flutter下载配置

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

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


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


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


3.AndroidStudio安装与配置

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

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

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



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


4.配置gradle 

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

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


5.安装genymotion模拟器 (不过flutter貌似识别不了,最后还是用了android自带的avd模拟器)

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

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

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


6.新建项目

新建项目,选择 flutter project


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


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


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


运行界面


关注

如果有问题,请在下方评论,或者加群讨论 936799301 

关注下方微信公众号,可以及时获取到各种技术的干货哦,如果你有想推荐的帖子,也可以联系我们的。