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,并配置环境变量,在线下载真的是超慢超慢。
代码语言:javascript复制 maven { url "http://maven.aliyun.com/nexus/content/groups/public/" } jcenter() maven { url "https://jitpack.io" } google()
image
点击运行按钮,第一次有点慢,因为要下载依赖的安装包,我这里连得是真机,可以看出120fps不是吹的,特别流畅。
image
运行界面
image