课前必读

为什么每一位大前端从业者都应该学习Flutter

• Flutter开辟了全新的思路，提供了一整套从底层渲染逻辑到上层开发语言的完整解决方案：视图渲染完全闭环在其框架内部，不依赖于底层操作系统提供的任何组件，从根本上保证了视图渲染在 Android 和 iOS 上的高度一致性；Flutter 的开发语言 Dart，是 Google 专门为（大）前端开发量身打造的专属语言，借助于先进的工具链和编译器，成为了少数同时支持 JIT 和 AOT 的语言之一，开发期调试效率高，发布期运行速度快、执行性能好，在代码执行效率上可以媲美原生 App。而这与 React Native 所用的只能解释执行的 JavaScript，又拉开了性能差距。

从0开始搭建Flutter工程环境

下载Flutter

• 下载地址：https://flutter.cn/docs/get-started/install/windows

配置环境变量

1. 编辑path新建下载的Flutter的bin目录路径 。

   export PATH=~/Documents/flutter/bin:$PATH
   

2. 用户变量新建镜像站点(Flutter源站在国内不太稳定)

   export PUB_HOSTED_URL=https://pub.flutter-io.cn  
   export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
   

3. Flutter 提供了一个命令 flutter doctor 协助我们安装 Flutter 的工程依赖，它会检查本地是否有 Android 和 iOS 的开发环境，如果检测到依赖缺失，就会给出对应依赖的安装方法。

   flutter doctor
   

4. AndroidStudio配置

   • 在Android Studio的Plugins安装Flutter和Dart插件 。

5. 运行Flutter项目

   • Flutter项目默认入口为main.dart

     void main() {
       runApp(MyApp());
     }
     class MyApp extends StatelessWidget {
       // This widget is the root of your application.
       @override
       Widget build(BuildContext context) {
           return Center(
               child:Text('Hello World')
           );
       }
     }
     

   • Flutter 在开发阶段使用了 JIT 编译模式，使得通过热重载（Hot Reload）这样的技术去进一步提升调试效率成为可能。每次修改布局后，按ctrl+s就会热更新。但是热重载也有一定的局限性，并不是所有的代码改动都可以通过热重载来更新。

Dart语言概览

Dart是什么

• 2011 年 10 月，在丹麦召开的 GOTO 大会上，Google 发布了一种新的编程语言 Dart。如同 Kotlin 和 Swift 的出现，分别是为了解决 Java 和 Objective-C 在编写应用程序的一些实际问题一样，Dart 的诞生正是要解决 JavaScript 存在的、在语言本质上无法改进的缺陷。

• Dart 的诞生正是要解决 JavaScript 存在的。JavaScript 实际上是两类编程语言(C语言和Java语言)风格的混合产物：（简化的）函数式编程风格，与（简化的）面向对象编程风格。

• Atwood 定律：凡是能用 JavaScript 写出来的系统，最终都会用 JavaScript 写出来（Any application that can be written in JavaScript, will eventually be written in JavaScript.）。

• Google 未来的操作系统 Fuchsia 中，Dart 更是被指定为官方的开发语言。

Dart特性

1. JIT和AOT

   • 借助于先进的工具链和编译器，Dart 是少数同时支持 JIT（Just In Time，即时编译）和 AOT（Ahead of Time，运行前编译）的语言之一。

   • JIT 在运行时即时编译，在开发周期中使用，可以动态下发和执行代码，开发测试效率高，但运行速度和执行性能则会因为运行时即时编译受到影响。AOT 即提前编译，可以生成被直接执行的二进制代码，运行速度快、执行性能表现好，但每次执行前都需要提前编译，开发测试效率低。

   • 看代码在执行前是否需要编译即可。如果需要编译，通常属于 AOT；如果不需要，则属于 JIT。AOT 的典型代表是 C/C++，它们必须在执行前编译成机器码；而 JIT 的代表，则包括了如 JavaScript、Python 等几乎所有的脚本语言。

2. 内存分配和垃圾回收

   • Dart VM 的内存分配策略比较简单，创建对象时只需要在堆上移动指针，内存增长始终是线性的，省去了查找可用内存的过程。
   • 在 Dart 中，并发是通过 Isolate 实现的。Isolate 是类似于线程但不共享内存，独立运行的 worker。这样的机制，就可以让 Dart 实现无锁的快速分配。
   • Dart 的垃圾回收，则是采用了多生代算法。新生代在回收内存时采用“半空间”机制，触发垃圾回收时，Dart 会将当前半空间中的“活跃”对象拷贝到备用空间，然后整体释放当前空间的所有内存。回收过程中，Dart 只需要操作少量的“活跃”对象，没有引用的大量“死亡”对象则被忽略，这样的回收机制很适合 Flutter 框架中大量 Widget 销毁重建的场景。单线程模型。

3. 单线程模型

   • 它天然不存在资源竞争和状态同步的问题。这就意味着，一旦某个函数开始执行，就将执行到这个函数结束，而不会被其他 Dart 代码打断。
   • Dart 中并没有线程，只有 Isolate（隔离区）。Isolates 之间不会共享内存，就像几个运行在不同进程中的 worker，通过事件循环（Event Looper）在事件队列（Event Queue）上传递消息通信。

4. 无需单独的声明式布局语言

   • 在 Flutter 中，界面布局直接通过 Dart 编码来定义。
   • Dart 声明式编程布局易于阅读和可视化，使得 Flutter 并不需要类似 JSX 或 XML 的声明式布局语言。所有的布局都使用同一种格式，也使得 Flutter 很容易提供高级工具使布局更简单。
   • 开发过程也不需要可视化界面构建器，因为热重载可以让我们立即在手机上看到运行效果。