Flutter实现动态化更新-技术预研

1. webview增强 【植入腾讯 X5内核，模型升级改造】

2. UI库模板化

各大厂动态化架构对比

---

Flutter Fair

---

Fair是“58同城”为Flutter设计的动态化框架，通过Fair Compiler工具实现JSON配置和原生Dart源文件的自动转化，从而动态更新Widget Tree和State。

使用介绍

官方并没有维护pub上的Fair插件，我们需要去GitHub fork源码下来编写demo。58Fair

准备一份配置好的JSON文件，然后直接调用FairWidget传入文件路径即可显示，非常简单。动态化需求无非就是把JSON配置文件放到线上，然后FairWidget每次都会重新拉取下来展示，从而实现动态化。

/// 基本使用

return Container(

alignment: Alignment.centerLeft,

color: Colors.white,

constraints: BoxConstraints(minHeight: 80),

child: FairWidget(

name: item.id,

path: ‘assets/bundle/sample.json’,

data: {“fairProps”: json.encode({‘detail’: details})},

),

);

继续跟进源码，可以看到当我们传入的文件路径是以http开头的时候，会通过网络进行拉取

void _reload() {

var name = state2key;

var path = widget.path ?? _fairApp.pathOfBundle(widget.name);

bundleType = widget.path != null && widget.path.startsWith(‘http’)

? ‘Http’

‘Asset’;

parse(context, page: name, url: path, data: widget.data).then((value) {

if (mounted && value != null) {

setState(() => _child = value);

}

});

}

/// 再通过parse()方法逐层进入decoder → bundle_provider，查看onLoad方法

@override

Future

{bool cache = true, Map<String, String> h}) {

bool isFlexBuffer;

if (path.endsWith(FLEX)) {

isFlexBuffer = true;

} else if (path.endsWith(JSON)) {

isFlexBuffer = false;

} else {

throw ArgumentError(

‘unknown format, please use either $JSON or $FLEX;\n $path’);

}

if (path.startsWith(‘http’)) {

return _http(path, isFlexBuffer, headers: h, decode: decoder);

}

return _asset(path, isFlexBuffer, cache: cache, decode: decoder);

}

/// 重点查看以http开头的解析方法，用的是http库拉取

Future

{Map<String, String> headers, FairDecoder decode}) async {

var start = DateTime.now().millisecondsSinceEpoch;

var response = await client.get(url, headers: headers);

var end = DateTime.now().millisecondsSinceEpoch;

if (response.statusCode !&#