1.Flutter概述
目前国内，对于Flutter的使用最多是今日头条和阿里巴巴：
包括今日头条、西瓜视频、皮皮虾等 20 多个业务在使用 Flutter 开发，有纯 Flutter 工程，也有 Flutter 与 Native 的混合工程。
阿里巴巴旗下的二手商品交易APP闲鱼，闲鱼团队是国内对Flutter生态贡献最大的。
未来趋势
目前Flutter主要在移动端Android/iOS双端跨端，Flutter 的愿景是成为一个多端运行的 UI 框架，能够支持不仅仅是移动端，还包括Web、桌面、甚至嵌入式设备。在2019 Google I/O 开发者大会上推出的使用 Flutter 开发 Web 应用的框架，同年9月发布Flutter 1.9，并将Flutter web合入Flutter主仓库。
Flutter和React Native的简单对比
Flutter是彻底的跨平台方案，既没有采用webView，也没有采用JS桥接原生控件，而是自行实现一套UI框架，在引擎底层通过Skia渲染到屏幕。
www.jianshu.com/p/20c30834f…
React Native 是一套 UI 框架，默认情况下 React Native 会在 Activity 下加载 JS 文件，然后运行在 JavaScriptCore 中解析 Bundle 文件布局，最终堆叠出一系列的原生控件进行渲染。
简单来说就是 通过写 JS 代码配置页面布局，然后 React Native 最终会解析渲染成原生控件，如 标签对应 ViewGroup/UIView ， 标签对应 ScrollView/UIScrollView ， 标签对应 ImageView/UIImageView 等。
Flutter 中绝大部分的 Widget 都与平台无关， 开发者基于 Framework 开发 App ，而 Framework 运行在 Engine 之上，由 Engine 进行适配和跨平台支持。这个跨平台的支持过程，其实就是将 Flutter UI 中的 Widget “数据化” ，然后通过 Engine 上的 Skia 直接绘制到屏幕上
2.Dart语言
2013年11月14日，谷歌发布Dart 1.0版本，2018年8月8日，谷歌发布Dart2.0版本。
Dart和JavaScript(ES6之后的版本）比较类似
1) 箭头函数
class ChildWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new ChildWidgetState();
}
}
等同于
class ChildWidget extends StatefulWidget {
@override
State createState() => new ChildWidgetState();
}
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
2) 异步函数
//先分别定义各个异步任务
Future<String> login(String userName, String pwd){
...
//用户登录
};
Future<String> getUserInfo(String id){
...
//获取用户信息
};
Future saveUserInfo(String userInfo){
...
// 保存用户信息
};
地狱回调
login("alice","******").then((id){
//登录成功后通过，id获取用户信息
getUserInfo(id).then((userInfo){
//获取用户信息后保存
saveUserInfo(userInfo).then((){
//保存用户信息，接下来执行其它操作
...
});
});
})
login("alice","******").then((id){
return getUserInfo(id);
}).then((userInfo){
return saveUserInfo(userInfo);
}).then((e){
//执行接下来的操作
}).catchError((e){
//错误处理
print(e);
});
task() async {
try{
String id = await login("alice","******");
String userInfo = await getUserInfo(id);
await saveUserInfo(userInfo);
//执行接下来的操作
} catch(e){
//错误处理
print(e);
}
}
new Promise((resolve, reject) => {
resolve(1);
console.log(2);
}).then(r => {
console.log(r);
});
3. Flutter
1) 数据驱动视图更新
Flutter是数据驱动视图更新，跟小程序类似。
原生开发中，例如iOS（安卓也是一样）:
UILabel* label = [[UILabel alloc] init];
label.text = 'Hell World';
再看看传统前端开发，也是在js中，利用选择器获取控件对控件进行状态，赋值的改变：
$("p").css("background-color","red");
Flutter:
class HomePageState extends State<HomePage> {
String text = "hello world";
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Text(text),
RaisedButton(
child: Text("刷新"),
onPressed: () => setState(() {text = 'hi world';}))
],
);
}
}
小程序：
//pages/test.wxml
<text>{{count}}</text>
<button bindtap='clickCount' data-msg='click'>点击计数</button>
// pages/test.js
Page({
/**
* 页面的初始数据
*/
data: {
count: 0,
},
/**
* 计数按钮方法
*/
clickCount(options) {
this.setData({
count: this.data.count + 1
});
}
})
2) 布局方式
参考文档
book.flutterchina.club/chapter4/
flutterchina.club/tutorials/l…
3) 消息传递方式
从上往下：
Provider
参考文档
juejin.cn/post/684490…
从下往上：
Notification
参考文档
book.flutterchina.club/chapter8/no…
block回调
参考文档
www.jianshu.com/p/2bc1a8777…
EventBus
参考文档
book.flutterchina.club/chapter8/ev…
4) Flutter和原生交互
native端则通过EventChannel将发生的事件或消息传递给flutter，主要是异步调用结果或者native持续产生的数据流。
Flutter如何集成原生视图
在 Flutter 1.0版本中，Flutter SDK中新增了AndroidView和UIKitView 两个组件，这两个组件的主要功能就是将原生的Android组件和iOS组件嵌入到Flutter的组件树中。注意，使用PlatformView的开销是非常大的，因此，如果一个原生组件用Flutter实现的难度不大时，我们应该首选Flutter实现。
5) Flutter架构
MVP, MVC, Fish Redux
6) Flutter存在的一些问题
消化代码
7) 接下来的工作
Flutter中集成原生高德地图的尝试
