Flutter学习笔记(一) 前期准备

官网：flutter.dev/docs

环境：

AndroidStudio 3.3.1

FlutterSdk 1.2.1

1、简介

Flutter 是 Google推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者能够经过 Dart语言开发 App，一套代码同时运行在 iOS 和 Android平台。Flutter使用本身的高性能渲染引擎来绘制widget，Flutter使用Skia做为其2D渲染引擎，Skia是Google的一个2D图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现，Skia是跨平台的。

因为Android系统已经内置了Skia，因此Flutter在打包APK(Android应用安装包)时，不须要再将Skia打入APK中，但iOS系统并未内置Skia，因此构建iPA时，也必须将Skia一块儿打包，这也是为何Flutter APP的Android安装包比iOS安装包小的主要缘由。

Flutter高性能主要靠两点来保证，首先，Flutter APP采用Dart语言开发。Dart在 JIT（即时编译 Just-in-time）模式下，速度与 JavaScript基本持平。可是 Dart支持 AOT(静态编译 Ahead of time)，当以 AOT模式运行时，JavaScript便远远追不上了。速度的提高对高帧率下的视图数据计算颇有帮助。其次，Flutter使用本身的渲染引擎来绘制UI，布局数据等由Dart语言直接控制，因此在布局过程当中不须要像RN那样要在JavaScript和Native之间通讯，这在一些滑动和拖动的场景下具备明显优点，由于在滑动和拖动过程每每都会引发布局发生变化，因此JavaScript须要和Native之间不停的同步布局信息，这和在浏览器中要JavaScript频繁操做DOM所带来的问题是相同的，都会带来比较可观的性能开销。

程序主要有两种运行方式：静态编译与动态解释。静态编译的程序在执行前所有被翻译为机器码，一般将这种类型称为AOT （Ahead of time）即 “提早编译”；而解释执行的则是一句一句边翻译边运行，一般将这种类型称为JIT（Just-in-time）即“即时编译”。AOT程序的典型表明是用C/C++开发的应用，它们必须在执行前编译成机器码，而JIT的表明则很是多，如JavaScript、python等。

基于JIT的快速开发周期：Flutter在开发阶段采用，采用JIT模式，这样就避免了每次改动都要进行编译，极大的节省了开发时间； 基于AOT的发布包: Flutter在发布时能够经过AOT生成高效的ARM代码以保证应用性能。而JavaScript则不具备这个能力。

2、框架结构

Flutter Framework 一个纯 Dart实现的 SDK，它实现了一套基础库，自底向上，咱们来简单介绍一下：

• 底下两层（Foundation和Animation、Painting、Gestures）在Google的一些视频中被合并为一个dart UI层，对应的是Flutter中的dart:ui包，它是Flutter引擎暴露的底层UI库，提供动画、手势及绘制能力。
• Rendering层，这一层是一个抽象的布局层，它依赖于dart UI层，Rendering层会构建一个UI树，当UI树有变化时，会计算出有变化的部分，而后更新UI树，最终将UI树绘制到屏幕上，这个过程相似于React中的虚拟DOM。Rendering层能够说是Flutter UI框架最核心的部分，它除了肯定每一个UI元素的位置、大小以外还要进行坐标变换、绘制(调用底层dart:ui)。
• Widgets层是Flutter提供的的一套基础组件库，在基础组件库之上，Flutter还提供了 Material 和Cupertino两种视觉风格的组件库。而咱们Flutter开发的大多数场景，只是和这两层打交道。 Flutter Engine

Flutter Engine 这是一个纯 C++实现的 SDK，其中包括了 Skia引擎、Dart运行时、文字排版引擎等。在代码调用 dart:ui库时，调用最终会走到Engine层，而后实现真正的绘制逻辑。

3、环境安装

1. Download Flutter SDK
2. 设置环境变量Path
3. 安装Android Studio 3.0或更高版本
4. 安装Flutter和Dart插件 安装Flutter时，会提示安装Dart，选择安装便可。

   

5. 重启AndroidStudio，就能够建立Flutter工程。

4、开始Flutter体验

1. 建立Flutter Application

   

   

2. Project的默认结构，应用程序代码位于：lib/main.dart

   

3. 运行
4. Hot Reload