Flutter学习 一

一，Flutter简介

官网：官网Flutter

Github源码：Flutter Github源码下载

Dart 官网：Dart

• 框架概况
  Flutter是谷歌的移动UI框架 [4] ，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。它也是构建未来的Google Fuchsia [1] 应用的主要方式。
  Flutter组件采用现代响应式框架构建，这是从React中获得的灵感，中心思想是用组件(widget)构建你的UI。 组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变，组件会重构它的描述(description)，Flutter会对比之前的描述， 以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。

Flutter以一种类似游戏引擎，提供通过类似游戏开发的方式，以一套代码生成Android和iOS平台两种应用，很大程度上减少了App开发和维护的资源，同时Dart语言强大的性能表现和丰富的特性，使得开发比较便利，但是Flutter目前还处于Alpha阶段，许多功能还不是特别完善，完全替代目前Android和iOS开发还有比较长的路要走。

• 发展历史

Flutter的第一个版本被称为“Sky”，运行在Android操作系统上。它是在2015年Dart开发者峰会 [3] 上亮相的，其目的是能够以每秒120帧的速度持续渲染。
Beta
Beta1版本于2018年2月27日在2018 世界移动大会公布 [5] 。
Beta2版本2018年3月6日发布 [6] 。
1.0版本于2018年12月5日(北京时间)发布 [7] 。

二，Flutter 的优势

• 高生产率

1. 一套代码可以开发出 Android 和 iOS 应用
2. Dart语言优越性，使得同样的功能只需要很少的代码。
3. 迭代更加方便， hot reload 功能

• 创建优雅的、高度可定制的用户界面

1. Flutter 内置了对Material Design和Cupertino (iOS-flavor)的 UI 组件库
2. 提供了可定制的 UI 组件，不再受制于OEM控件的限制

三，Flutter框架特性

• 快速开发
  Flutter的热重载帮助你快捷方便的试验、重构UI、添加特性和修复bug。在仿真器、模拟器和ios、android硬件上体验亚秒级的重载，而不会丢失状态。

• 绚丽UI
  通过Flutter内建的漂亮的质感设计和Cupertino（ios-flavor）小工具、丰富的动画API，平滑的自然滚动和平台感知，让用户感到满意。

• 响应式
  通过Flutter的现代响应式(Reactive)框架和丰富的平台布局和基础组件轻松构建您的用户界面。用强大而灵活的API解决2D、动画、手势、效果等难题。

class CounterState extends State<Counter> {
  int counter = 0;  
  void increment() {
      // 通知Flutter框架状态已改变   
      // 因此框架可以运行build()并更新显示
      setState(() {      
          counter++;    
      });  
  }  
  Widget build(BuildContext context) {
      // 这个方法会在每次setState调用时运行
      // Flutter框架已经对重复快速运行build方法进行优化
      // 因此你可以仅更新你想要更新的任何东西，而不必
      // 更新整个组件实例。  
      return new Row(      
          children: <Widget>[        
              new RaisedButton(          o
                  nPressed: increment,          
                  child: new Text('Increment'),        
              ),        
              new Text('Count: $counter'),      
          ],    
      );  
  }
}

• 访问原生功能
  通过平台api、第三方sdk和原生代码使您的应用变得生动起来。Flutter让您可以重用您现有的java、swift和Objc代码，并在iOS和Android上访问原生特性和SDK。
  访问平台功能非常简单。这是互操作示例的片段：

Future<Null> getBatteryLevel() async {
  var batteryLevel = 'unknown';
  try {
    int result = await methodChannel.invokeMethod('getBatteryLevel');
    batteryLevel = 'Battery level: $result%';
  } on PlatformException {
    batteryLevel = 'Failed to get battery level.';
  }
  setState(() {
    _batteryLevel = batteryLevel;
  });
}

四，Flutter框架结构

Flutter 分为两个部分，上层是函数响应式的Framework（开源），下层是Engine，可以这样理解，基于Framework开发App，在Engine里运行。

• 与RN的区别

Flutter将UI组件和渲染器从平台移动到应用程序中，这使得它们可以自定义和可扩展。Flutter唯一要求系统提供的是canvas，以便定制的UI组件可以出现在设备的屏幕上。Dart程序和执行数据编码和解码的原生平台代码（蓝色，适用于iOS或Android）之间仍然有一个接口，但这能比JavaScript桥接器快几个数量级。

五，Flutter框架结构

官方推荐的集成开发环境是IntelliJ，工程的层次结构大致是这样的：

可以看到，Flutter框架自动生成了android目录和ios目录，并且框架已经做好了粘合两种平台的连接代码，开发者只需要在lib目录用Dart语言，基于其Framework编写App，即实现了一套代码产生两个平台的App。其中：

• Android：底层引擎是C++代码通过Android的NDK编译，上层通过Dart编译器编译，以native code方式运行
• iOS：底层引擎是C++代码通过LLVM编译，上层通过AOT-compiled，也是以native code方式运行

1. widget 特性

Widget 是每个 Flutter 应用的基础。每个 Widget 是一部分用户界面上不可变的定义。和其他框架把 View、controller、 Layout 和其他资源分开定义不一样，Flutter 具有一致的、唯一的对象模型—— Widget：

一个结构性的元素（比如 按钮或者菜单）
一个元素的风格（比如 字体或者颜色）
指定布局属性（比如 padding）
也可以包含一些业务逻辑

Widget 通过组合来组成层级结构。每个 Widget 都内嵌在父 Widget 中，并继承父 Widget 的属性。 并没有单独的 “application” 对象，根 Widget 扮演这个角色。Widget 可以响应用户事件来改变 UI，比如用户点击了一个按钮把一个 Widget 替换为另外一个 Widget。框架会比较变化前后 UI 的差异，并高效的更新 UI。

Widget Frame相关文档: Widget Frame