Flutter教程

Flutter 是 Google 开源的便携式 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。

跨平台

目前Flutter主要是用在移动app开发领域，web和桌面开发目前支持还不够成熟。

为了降低前端研发成本，提高研发效率跨平台技术是一个重要的方向。

Flutter的目标是使同一套代码同时运行在Android和iOS等多个系统上，并且拥有媲美原生应用的性能和体验，Flutter重写一套跨平台的UI框架。渲染引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，可以在最大程度上保证不同平台、不同设备的体验一致性，逻辑处理使用支持AOT的Dart语言，执行效率也比JavaScript要高得多。

提示：Dart非常简单，可以点击Dart语言教程学习一下。

Hot Reload

热刷新，指的就是修改完代码后，不需要重新编译app，不需要重启app，就可以看到修改代码后的效果。开发过android/ios app的人都知道，调试app有多麻烦，flutter的热刷新功能就是一个亮点，修改代码后，可以秒级在设备或者模拟器上看到UI效果。

插件

Flutter只是一个UI框架，并不提供访问设备的能力，例如，你需要访问摄像头、GPS定位等等，需要通过插件间接实现。目前Flutter社区已经拥有丰富的插件，可以满足我们日常的开发需求。

当然如果你有什么特殊需求，开源插件无法满足，可以开发Flutter 插件，开发插件，需要涉及 Android、iOS等平台App开发技术。其实就是封装一下Android、iOS的API, 然后提供给flutter调用。

Flutter例子

下面通过一个例子，看下Flutter App源码长什么样子？

下面代码在屏幕中间显示 Hello, world!

import 'package:flutter/material.dart';

void main() { //  main函数是app程序的入口
  runApp( // Flutter app的入口，传入一个widget，flutter让这个widget铺满整个屏幕
    Center(  // Center widget是一个居中显示组件
      child: Text( // 在center widget的子节点放一个text widget用来展示文本
        'Hello, world!',
        textDirection: TextDirection.ltr, // 文本对齐方向
      ),
    ),
  );
}

提示：在flutter中一切ui组件都是widget，类似android的view, ios的UIView，html中的div, widget就是flutter显示ui的基础。

runApp() 函数会持有传入的 Widget，并且使它成为 widget 树中的根节点。在这个例子中，Widget 树有两个 widgets，Center widget 及其子 widget ——Text 。框架会强制让根 widget 铺满整个屏幕，也就是说“Hello World”会在屏幕上居中显示。

说明：关于widget树，就是由传入runApp函数的widget作为树根，以及根widget的所有子节点（子widget）组成一棵树，类似Html中的dom组成的dom节点树，了解h5开发的话会比较熟悉这个。