最新消息
Flutter在12月5号发布了最新的稳定版本1.0,象征着Flutter新技术提上了征程，期待着他能靠一己之力改变移动端开的格局！
Flutter1.0官方推文
Let’s go
以下为正文，推荐官网APIFlutter，如果觉l得英文看着费劲[Flutter中文网(https://flutterchina.club/)，但是其更新速度比官网慢一下，我在写的时候还没有更新到1.0版本。
引言
移动端至少分为3大格局，Android开发，iOS开发和React Native开发。React Native将iOS和Android的开发平台相互融合通过js解释器构建，完成开发一次，两端都能使用的技术方案。但是React Native技术是FaceBook开发的，抛开技术性问题不谈，其开源类型非BSD项目，FaceBook还是对其拥有控制权，所以大公司都摒弃了React native的开发。（具体协议可自行查看）。
简介
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。（除非特别说明，其开源协议是BSD模式）
历程
环境构建
(笔者为android开发，只细谈安卓方向)
- FlutterSDK1.0 、AndroidSDK、jdk8.0、Dart插件
-
Android studio 、IDE、VS Code等任何编辑器
Android Studio编译.png
构建方式
Flutter与用于构建移动应用程序的其他大多数框架不同，因为Flutter既不使用WebView，也不使用操作系统的原生控件。相反，Flutter使用自己的高性能渲染引擎来绘制界面
Flutter中使用轻量的C++构建底层，使用Dart语言开发编译，使用Skia 2D渲染引擎渲染自己的weight控件。
Flutter技术要点
1.widget
简单的可以理解为view，整个Flutter应用都是使用的widget树构建UI，在构建过程中使用不同的widget控间嵌套来实现界面。
1).StatelessWidget
没有状态的组建，StatelessWidget创建一次，永远不会改变其外观，在build中搭建widget树布局。
2).StatefulWidget
根据收到的数据或yoghurt输入动态更改状态，creatState中创建一个State对象，而其State对象存在生命周期，可以进行setState操作动态更新界面的显示。
State存在生命周期如下：
其中reassemble:是在开发中的热更新才会调用的生命周期，这是与rn不同的地方。
2.实现网络加载
使用http请求，调用dio第三方库获取数据渲染到界面中，使用async await返回Future对象。
3.与原生交互（Android）
Android中：
public class FlutterToNative implements MethodChannel.MethodCallHandler {
public static String NAME = "com.kang.economicanalysis/plugin";
private Activity activity;
FlutterToNative(Activity activity){
this.activity = activity;
}
public static void registerWidth(PluginRegistry.Registrar registrar){
MethodChannel channel = new MethodChannel(registrar.messenger(), NAME);
FlutterToNative instance = new FlutterToNative(registrar.activity());
//setMethodCallHandler在此通道上接收方法调用的回调
channel.setMethodCallHandler(instance);
}
@Override
public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
//通过MethodCall可以获取参数和方法名，然后再寻找对应的平台业务，本案例做了2个跳转的业务
//接收来自flutter的指令oneAct
if (methodCall.method.equals("ToOne123")) {
//跳转到指定Activity
Intent intent = new Intent(activity, OneActivity.class);
activity.startActivity(intent);
//返回给flutter的参数
result.success("success");
}
//接收来自flutter的指令twoAct
else if (methodCall.method.equals("ToOne")) {
//解析参数
String text = methodCall.argument("flutter");
//带参数跳转到指定Activity
Intent intent = new Intent(activity, OneActivity.class);
intent.putExtra("flutter", text);
activity.startActivity(intent);
//返回给flutter的参数
result.success("从原生传回来的参数");
}
else {
result.notImplemented();
}
}
}
在MainActivity中进行调用：
public class MainActivity extends FlutterActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
GeneratedPluginRegistrant.registerWith(this);
//交互
FlutterToNative.registerWidth(registrarFor(FlutterToNative.NAME));
}
}
flutter代码中：
//获取到插件与原生的交互通道
static const jumpPlugin = const MethodChannel('com.kang.economicanalysis/plugin');
//原生交互传递值，获取返回值SetState更新到UI中
Future<Null> _ToNative() async {
Map<String, String> map = { "flutter": "flutter" };
String result = await jumpPlugin.invokeMethod('ToOne', map);
setState(() {
_data = result;
});
}
这样就结束了！
在Flutter中使用的是通道的方式构建与原声的交互，通道建立完毕后随时调用，随时通信，还可以使用这种方式拓展控件，例如：flutter不支持webview，可以使用Android原生的webview通过addContentView()，添加到Flutter使用。flutter-webview
底层架构对比
React Native使用js语言开发，形式模仿React框架，执行需要js解释器，UI通过原生控件渲染。
Flutter直接使用原生的canvas，在其自带的Skia 2D引擎上渲染UI，不通过间接转换，节省时间
与React Native对比
1.开发差异：
- 基于js的ES6开发，遵循react前端框架开发
- 使用Dart语言开发，纯面向对象开发，使用widget搭建布局
2.友好性：
- Flutter对Android友好
- React Native对iOS友好
3.控件影响
- Flutter控件是由自己定义的，所以其渲染速度十分快速，
- Flutter的控件在iOS和Android上的效果基本完全一致，而React Native存在将RN控件转换为原生控件的过程，存在一定的差异。
- 在Android和iOS的控件发生更新后需要将更新同时更新到Flutter的控件中，由于是一家公司，所以Android控件容易更新，然而iOS控件的更新可能较慢。
4.效率：
- Flutter的渲染UI效率较高，刷新率高，FPS较高。
5.动态化：
- Flutter目前不支持代码的热更新，但是开发者给出思路（Dart to JS）
- React Native加载jsbundle文件，目前存在多种热更新方案。
6.App体积：
- iOS Flutter>React Native (iOS需要额外集成skia引擎，而android自带)
- Android Flutter<React Native (Android中加入OkHttp导致体积增大)
- Flutter预览版更新后App体积再次缩小30%
7.平板适配性：
- Flutter没有对平板进行适配
8.兼容性：
- Flurrer提供的widget都是基于skia引擎实现和精心定制的，与具体平台没有关系，所以能保持很高的跨OS跨OS Version的兼容性。flutter从更基础的曾磨平了平台的差异，站在更宽广、更可控的一个基础平台上去演变和发展。
9.稳定性：
- Flutter才出现稳定1.0版本，而RN已经出来3年了，所以React Native的稳定性更好
其他
- '_'代表私有，可修饰成员和类
- 使用Router和Navigator实现路由导航（push/pop, eg:pushAndRemoveUtil == SingleTask）
- 支持动画、手势、暂不支持Echarts
- 打包形式与原生相同
- colors 只支持16进制
- 资源文件需要在配置文件pubspec.yaml中引用方可使用
总结
- 总体上来说，Flutter的技术比React Native技术更加新颖，性能更好，渲染速度更快，各方面都更加优秀，而且Flutter的开源模式为BSD，也优于React Native。
- Flutter出来的时间只有1年，所以不是很成熟，稳定性较差，所以如何选择就看你们了！
