Flutter

Flutter 基础认识

xmamiga

Flutter 作为谷歌最新力作的跨平台开发框架，本着一切谐为组件的理念，为开发者带来福利。看看今年的 Google I/O 大会，Flutter 又得到大力的推广，感觉中美的 IT 差距又被拉大了。不管如何变化，大前端应该是趋势，身为技术人员，了解一些大前端开发技术绝对是有必要的。

一、Flutter简介

Flutter 是 Google 推出的一款新的用于创建移动应用的开源框架，可以快速在 iOS、Android 以及 Fuchsia 上构建高质量的原生用户界面。经过几次的迭代，Flutter 不再是一个单纯的移动框架，而是一个多平台框架。 目前 Flutter 是完全免费、开源的。其官方编程语言为 Dart，也是一门全新的语言。所以说，对于移动端开发人员，语言以及框架都是全新的，整个技术栈的积累也都得从头开始。

Dart -- 亲王
Kotlin -- 亲儿子

1.1 Flutter 发展历程

2017 年 Google I/O 大会上，Google 首次推出了一款新的用于创建移动应用的开源库—— Flutter；

2018 年初，Google 发布了 Flutter 的第一个 beta 版本；

2018 年 5 月的 Google I/O 大会上，Flutter 更新到了 beta 3 版本；

2018 年 12 月 Google 发布了 Flutter 的正式版 1.0

2019 年 2 月 Google 发布了首个稳定更新版 —— Flutter 1.2

2019 年 5 月 Google 发布 Flutter 稳定版本 1.5，这是 Flutter 迄今为止最大的一次版本发布。

1.2 特性

快速开发：Flutter 的热重载可以快速地进行测试、构建 UI、添加功能并更快地修复错误。

富有表现力，漂亮的用户界面：自带的 Material Design 和 Cupertino（iOS 风格）Widget、丰富的 motion API、平滑而自然的滑动效果。

响应式框架：使用 Flutter 的现代、响应式框架，和一系列基础 Widget，轻松构建您的用户界面。

访问本地功能和 SDK：Flutter 可以复用现有的 Java、Swift 或 ObjC 代码，访问 iOS 和 Android 上的原生系统功能和系统 SDK。

统一的应用开发体验：Flutter 拥有丰富的工具和库，可以帮助开发者轻松地同时在 iOS 和 Android 系统中实现想法和创意。

原生性能：Flutter 包含了许多核心的 Widget，如滚动、导航、图标和字体等，这些都可以在 iOS 和 Android 上达到原生应用一样的性能。

1.3 全平台 UI 框架之路

二、Flutter总体架构

Flutter 提供移动应用程序 SDK，一份代码可以同时生成 iOS 和 Android 两个高性能、高保真的应用程序。Flutter 将 UI 组件和渲染器从平台移动到应用程序中，这使得它们可以自定义和可扩展。Flutter 唯一要求系统提供的是 canvas，以便定制的 UI 组件可以出现在设备的屏幕上。

2.1 总体架构

Framework(Dart): Foundation -> Animation/Painting/ Gestures -> Rendering -> Widgets -> Material/Cupertino

  • Material : 偏 Android 规范
  • Cupertino ： 偏 iOS 规范

Engine(C++)： Ska Dart Text

跨平台应用的框架，没有使用 WebView 或者系统平台自带的控件，使用自身的高性能渲染引擎(Skia)自绘。

界面开发语言使用 Dart，底层渲染引擎使用 C, C++。

组合大于继承，控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，类的层次结构是扁平的，以最大化可能的组合数量。

2.2 GPU 渲染

2.3 状态控制

三、Dart 语言简介

Dart 官网

Dart 指北

Dart 是谷歌开发的计算机编程语言，于 2011 年 10 月份发布，可以被用于 Web、服务器、移动端和物联网等领域的开发。Flutter 采用 Dart，原因很多，抛开商业层面的 Java 版权问题，单纯从技术层面：

Dart 是 AOT（Ahead Of Time）编译的，编译成快速、可预测的本地代码，使 Flutter 几乎都可以使用 Dart 编写；

Dart 也可以 JIT（Just In Time）编译，开发周期快；

Dart 可以更轻松地创建以 60 fps 运行的流畅动画和转场；

Dart 使 Flutter 不需要单独的声明式布局语言；

Dart 容易学习，具有静态和动态语言用户都熟悉的特性。

Dart 最初设计是为了取代 JavaScript 成为 Web 开发的首选语言，最后的结果可想而知，到 Dart 2 的发布，专注于改善构建客户端应用程序的体验，可以看出定位的转变。用过 Java、Kotlin 的人，可以很快的上手 Dart。

一门语言的成败，抛开背后的商业推动，很重要的一点在于其生态，生态的好坏，主要包括开发者以及第三方库的数目，目前看，Dart 的生态还是比较差。对于个人开发者，可以根据心情来选择，但是对于商业应用，有更复杂的考量标准。Dart 背后有谷歌的推动，能发展到什么程度，还得看其商业运作能力了。

Dart 应用



  • Dart for Flutter

  • Dart for Web (实际上用的不多)

  • Dart forServer

四、基础认识

4.1 基础 Widget

  • Text

  • Row,Column

  • Stack

  • Container

4.2 使用 Material 组件

设计规范: material

4.3 常用控件使用

4.4 常用页面布局

4.5 手势处理介绍

手势按下 ： GestureDetector

滑动删除手势 ： Dismissible

4.6 资源和图片

Adding assets and images

所有资源都要在项目的根目录下 pubspec.yaml 文件定义。

资源和图片处理
flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png
自定义字体处理
flutter:
  fonts:
    - family:myfont
      fonts
         - assets: fonts/myfont.ttf

4.7 动画处理

AnimatedOpacity

五、总结

目前而言，Flutter 生态还是非常的不完善，相关的资料也非常少。如果是个人而言，我觉得可以放心大胆的去学习尝试，如果自己开发 APP 的话，可以写一套代码，在多个平台运行发布。如果是商业团队，这个就要自行取舍，毕竟用 Flutter 存在风险，一旦出现一些坑，如果能填好，那还行，如果涉及到无法解决的问题，就只能放弃。因此看自己团队人力以及时间合理安排比较合适。（目前看阿里的咸鱼团队在研究 Flutter）

如果单纯从 Flutter 本身能够解决的问题的方面出发，使用 Flutter 确实能够产生一定的收益，节省开发成本，如果考虑到目前坑比较多的状况，加上踩坑的时间，可能就无法去评估了。

总体来说，Flutter 确实是一个比较不错的东西，又有巨头 Google 背书，如果 Google 能够把它发展的比较完善，对于个人以及小团队来说，确实是个福音。

题外话：以目前的国力，对于国内巨头们推一套系统应该不难，而是难在整个生态上。

Refer

Author | xmamiga
移动应用开发者