flutter初探,从零开始搭建一个app

Posted 2021-04-29 腾讯DeepOcean

一.Flutter是什么？

Flutter是Google开发维护的一个跨平台（android 和 ios）的移动开发框架，使用的是 Dart 语言。Flutter 的目标是用来创建高性能、高稳定性、高帧率、低延迟的 Android 和 iOS 应用。

二.Flutter与react native 性能对比？

react native的性能瓶颈主要有两个方面：

1.view相互嵌套：比如我们渲染一个复杂的ListView,每一个小的控件,都是一个native的view,然后相互组合叠加.会导致渲染对象增加。

2.JSbridge计算和交互：在动画过程中，JSbridge需要频繁运算交互,会导致动画卡顿。下图是react native渲染过程

2.Flutter 是通过底层C/C++构建，不需要通过JSbridge层，同时Flutter都是组件化的，如list不需要view嵌套的过程，整体结构更加扁平,没有react native嵌套的问题。下图为Flutter的渲染过程：

结论如下：Flutter性能优于react native。

三.Flutter的安装和使用

作者这里选择Mac平台，IOS应用作为开发环境

1.获取文件

2.创建项目和运行

注意：IOS创建项目时候要保证有Xcode的环境.

四.编写第一个程序

1.引入对应的package文件

a.打开 pubspec.yaml, 并将需要包文件加入到配置中

b.在终端运行 flutter packages get

2.写出你的第一句hello world

3.在终端模拟器显示效果如下：

五.创建一个简单APP

1.布局Listview

终端运行效果如下

2.创建网络

引入dart.io处理网络事件

引入dart.convert处字符串json问题

最终效果：

六.打包运行

IOS需要通过Xcode内build到手机上

android可以通过：flutter build apk 边缘打包到手机上

七.结论

Flutter的不足：

1.写布局的方式不如web舒服，写起来很生气。

2.会明显增加应用包体积。

Flutter的好处：

1.跨平台。

2.调试方便，代码更改之后，立刻可以看到效果。

3.社区发展较快。

参考文章：

https://www.zhihu.com/question/50156415

https://flutter.io/get-started/codelab/