Flutter 入门与案例实战

什么是Flutter?

定义:

Flutter 是 Google公司出品的移动 UI框架,通过它可以快速在IOS和Android 上构建高质量的原生用户界面。

flutter官网

特点:

跨平台:Linux、Android、IOS、Fuchsia

原生:它是原生的,可以让我们的用户体验更好, 性能更好。

开源免费:完全免费,可以进行商用。

Flutter 与 主流框架的对比

  • Cordova:混合式开发框架(Hybrid App) 基于网页技术包装,里面仍然是HTML+CSS,利用JS通过桥接形式开发,开发出来的内容还是网页的形式,体验感和流畅度都不如原生
  • RN(React Native):生态环境较好,生成原生APP,但以View为基础嵌套 将需要展示的View编译成原生的View,效率上高于Cordova 。 但是RN也有效率问题,因为它的渲染机制是基于前端框架考虑,复杂的View是需要多个View进行叠加的 。 例如:一个复杂ListView,每个小的控件都是一个单独的View,然后叠加结合,如果页面需 要滑动刷新的效果,会有多个对象进行渲染,就会导致页面变慢,虽然RN可以达到差不多 60桢每秒,但是有一个瓶颈,很难再向上突破 。
  • Flutter:在渲染技术上,选择了自己实现(GDI) 由于有更好的可控性,使用了谷歌的Dart语言,避免了RN通过桥接器导致效率低下的问题,在性能上会更好,Flutter的布局也是整个的一个布局,渲染效率会更高,差不多可以达到120桢每秒

Flutter 120fps 超高性能

flutter 是采用的GPU进行渲染的,而非传统的CPU。

fps 是每秒传输帧数,可以简单的理解为每秒画面数。

Flutter 生态环境介绍

Flutter 是由Google 公司出品和推广的,并且在中国也有推广中心。

第三方组件也在迅猛发展,例如 https://github.com/Solido/awesome-flutter

目前有很多大型互联网公司都在使用Fluuter,例如:阿里巴巴、腾讯、京东等等

Flutter 开发环境搭建

系统的基本要求

1、要求操作系统必须是windows7 以上的64为操作系统

2、要求磁盘空间必须大于3G,最好可以达到5G

Java环境的安装

1、首先需要安装JDK和JRE

2、然后通过 java -version 命令检测是否安装成功

Flutter SDK的安装

1、首先需要去 https://flutter.dev/docs/development/tools/sdk/releases 下载Flutter SDK(ps:最好翻墙以后在下载,否则下载速度会特别慢),

2、下载最新的2.0.1的稳定版就可以了,如下图所示

3、Flutter SDK 下载完成以后,将该压缩文件移动到想安装的盘符,然后进行解压,得到一个flutter文件夹

4、解压完成以后,进入到 flutter/bin目录下,然后复制当前的路径(ps:主要用于后期环境变量的配置)

5、然后点击 计算机,右击属性

6、然后点击高级系统设置

7、然后点击环境变量

8、双击系统变量中的Path 路径

9、将刚刚复制的flutter/bin的路径粘贴到变量值的最后面,如果变量值的最后没有英文的分号(;),那么必须先添加英文的分号以后在粘贴。

10、然后点击确定保存,并打开DOS明命令窗口,输入flutter doctor 命令以检测flutter是否安装成功,如果出现Flutter版本号,并且前面是绿色的对勾,那么表示安装成功,例如我的是 Flutter (Channel stable, 2.0.1, on Microsoft Windows [Version 6.1.7601], locale zh-CN)

Android Studio的介绍和安装

1、去 http://www.android-studio.org/ 下载AndroidStudio 工具

Dart和Flutter 开发插件的安装

1、打开AndroidStudio 工具,然后点击 File>Settings>>Plugins>> 然后输入 flutter

然后 点击 install 安装即可(ps:如出现搜索不到flutter插件,请参见https://www.guobao0730.com/androidstudio-3-5%e7%89%88%e6%9c%ac%e6%97%a0%e6%b3%95%e9%80%9a%e8%bf%87-plugins-%e6%90%9c%e7%b4%a2%e5%88%b0%e6%8f%92%e4%bb%b6/

然后点击Accept 接受

然后会提示说 要安装的插件需要其他插件(Dart),这些插件也必须安装。继续吗?,直接点击 Yes 即可

然后等待插件安装完成以后,点击Restart IDE 重启AndroidStudio 即可

Android证书的安装

在执行 flutter doctor 命令时,出现了该错误,如下图所示

提示我们,某些 Android 许可证不被接受,需要安装

执行以下命令

flutter doctor --android-licenses

然后一路 y 即可,然后再次执行 flutter doctor 即可查看是否已成功获取许可证,如下图所示:

如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注