腾讯技术团队整理，年度好文轻松彻底入门 Flutter，秒变大前端

原文作者：腾讯技术
原文链接：https://zhuanlan.zhihu.com/p/90836859
来源：知乎

本文真对 Flutter 的技术特性，做了一些略全面的入门级的介绍，如果你听说过Flutter，想去了解它，但是又不想去翻厚厚的API，那么本文就是为你准备的。

随着纯客户端到Hybrid技术，到RN&Weex，再到如今的Flutter技术，客户端实现技术不断前进。 在之前的一个APP项目中，因为历史原因当时选择了weex，随着使用的不断深入，我们逐渐发现了weex的渲染性能问题已经成为一个隐患和瓶颈。 而Flutter技术的不断成熟和流行，Flutter的良好的跨平台性和高性能优点，不断吸引着我们。

（本文包含以下内容，阅读完需要约18分钟）

• 1.Flutter是啥玩意儿？
• 2.移动端跨平台技术对比
  2.1 H5+原生APP
  2.2 RN&Weex
  2.3 Flutter
• 3.Dart语言
• 4.环境配置
• 5.Hello World
  5.1 创建项目
  5.2 项目结构
  5.3 启动模拟器
  5.4 启动项目APP
  5.5 简化版的Hello World
  5.6 给页面加上状态
  5.7 小结一下
• 6.路由
  6.1 单个页面的跳转
  6.2 更多页面跳转使用路由表
  6.3 路由传参
• 7.widget
  7.1 Text
  7.2 Button
  7.3 Container
  7.4 Image
• 8.布局
  8.1 Row & Column & Center 行列轴布局
  8.2 Align 角定位布局
  8.3 Stack & Positioned 绝对定位
  8.4 Flex & Expanded 流式布局
• 9.动画
  9.1 简单动画：淡入淡出
  9.2 复杂一些的动画：放大缩小
• 10.http请求
  10.1 HttpClient
  10.2 http
  10.3 Dio
• 11.吐吐槽
  11.1 墙
  11.2 组件过度设计
  11.3 嵌套太多不适应
  11.4 布局修改会导致嵌套关系修改
  11.5 Dart语言升级
  11.6 不能热更新
• 12.结语

1.Flutter是啥玩意儿？

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

• 具有跨平台开发特性，支持IOS、Android、Web三端。
• 热重载特性大大提高了开发效率
• 自绘UI引擎和编译成原生代码的方式，使得系统的运行时的高性能成为了可能
• 使用Dart语言，目前已经支持同时编译成Web端代码，

到底值不值得跟进Flutter技术呢？ 还是看下Flutter，Weex，ReactNative的搜索指数对比，大概就知道这个行业趋势了。

蓝色是Flutter，可以看出上升势头非常强劲。苦逼的前端就是这样，你不跟潮流，潮流就会把你抛弃。

2.移动端跨平台技术对比

为啥会有Flutter这种东西? 他的原理是什么？ 他是怎么做到高性能的？ 要明白这些问题，我们不得不从几种移动端跨平台技术的对比讲起。

2.1 H5+原生APP

技术门槛最低，接入速度最快，热更新最方便的，自然就是H5方式。APP中提供一个Webview使用H5页面的Http直连。APP和H5可以相互独立开发，JS使用Bridge与原生进行数据通信，显示界面依赖Webview的浏览器渲染。 但是带来的问题也很明显，因为是需要远程直连，那么初次打开H5页面，会有瞬间的白屏，并且Webview本身会有至少几十M的内存消耗。

当然，作为前端开发人员，在H5方式可以使用SPA单页面、懒加载、离线H5等各种前端优化手段进行性能优化，以使得H5的表现更接近原生。但是首次的瞬间白屏和内存，Bridge的通信效率低下，始终是被技术框架给局限住了。

2.2 RN&Weex

由于H5的那些弊端，爱折腾的前端工程师，祭出了RN、Weex两个大杀器， 使用原生去解析RN、Weex的显示配置，显示层、逻辑层都直接与原生数据通信。 因为抛弃了浏览器，自然渲染性能、执行性能都提升了一大截。

但是，每次遇到显示的变更，JS都还会通过Bridge和原生转一道再做渲染的调整，所以Bridge就最后成为了性能的瓶颈。在实际项目中，特别是做一些大量复杂动画处理的时候，由于渲染部分需要频繁通信，性能问题变得尤为突出。 有兴趣的同学可以去看看BindingX，里面有关于动画中数据通信效率低下导致动画帧率低下的详细说明。

2.3 Flutter

不得不佩服Google开发人员的想象力，为了达到极致性能，Flutter更前进了一步，Flutter代码编译完成以后，直接就是原生代码，并且使用自绘UI引擎原生方式做渲染。 Flutter依赖一个Skia 2D图形化引擎。Skia也是Android平台和Chrome的底层渲染引擎，所以性能方面完全不用担心。因为使用Dart做AOT编译成原生，自然也比使用解释性的JS在V8引擎中执行性能更快，并且因为去掉Bridge，没有了繁琐的数据通信和交互，性能就更前进了一步。

3.Dart语言

学习Flutter，得先了解Dart。Dart语言曾经雄心勃勃的要替换Javascript, 但是发布的时机正好遇到JS的飞速发展，于是就逐渐沉寂，直到配合Flutter的发布，才又重新焕发了生机。

在最近2019年9月的一次Google开发者大会中，伴随着Flutter1.9的发布，目前的Dart也同时更新到了2.5版本， 提供了机器学习和对C跨平台调用的能力。总体来说，Dart语法，对于前端同学，上手还是很容易的，风格很像。

关于Dart语法，请移步传送门：https://dart.dev/samples

4.环境配置

无论学什么新语言，首先都是环境配置。由于Flutter出自Google，所以有一定门槛，如果在公司内安装，你还需要一个方便的代理切换工具, 比如：Proxifier 。

安装教程，参照官网：https://flutter.dev/docs/get-started/install

Flutter支持多种编辑器如：Android Studio , XCode。 但是既然作为支持跨双端的开发，个人还是推荐使用 VSCode。

VSCode安装完成后，需要安装Flutter插件，和Dart插件. 在扩展窗口里，搜索Flutter，和Dart，点击“Install”即可，非常方便。

如果安装不上去，记得开启下代理。

5.Hello World

作为一个伟大的程序员，第一行代码总是从Hello World开始。^_

5.1 创建项目：

方法1：直接使用命令创建：

flutter create projectname

方法2：使用VSCode创建:

View -> Command Palette -> Flutter:New Project 即可

注意请先打开代理，否则你的创建进度，会一直被卡住。

5.2 项目结构

将项目先拖入VSCode，看下目录结构。自动创建完成的项目中，我们看到已经自带了Android，IOS相关的运行环境。

入口主文件是main.dart. 可以打开来先熟悉下，暂时不了解没关系，后面再讲。

还有一个重要的文件是pubspec.yaml ，是项目的配置文件，这个后续也会做修改。

5.3 启动模拟器

点击VSCode右下角的模拟器，启动模拟器。(VSCode会自动找到Android环境、IOS环境下的模拟器，以及真机环境)

5.4 启动项目APP