Flutter动态化 | Fair 2.5.0 新版本特性

F

Fair2.0专题

● 项目名称：Fair 2.0

● Github地址：https://github.com/wuba/fair

● 项目简介：Fair是为Flutter设计的动态化框架，可以通过Fair Compiler工具对Dart源文件的转化，使项目获得动态更新Widget的能力。Fair 2.0是为了解决 Fair 1.0版本的“逻辑动态化”能力不足。

Fair新版本特性2.5.0

Fair 2.5.0版本全面适配Flutter 2.8.x所有版本。

更新时间：2022.05.31

版本特性

Fair

• 适配 Flutter SDK 2.8.0、2.8.1

• Dart2JS 支持解析单例

• 新增语法糖Sugar.switchCase、Sugar.colorsWithOpacity、Sugar.convertToString等

demo

• 全面优化example结构，升级example体验，更适合新手入门。
  在源码中，新增 example 工程，用于提供 Fair API 的标准用法。

• example 工程位置：fair/example

贡献者

新增功能使用说明

Dart2JS支持解析单例

在之前动态页面引用了单例的话，是无法完成 JS 解析，优化后，目前可以直接在动态页面中，使用单例。

代码示例：

单例：

class PageSingleton { factory PageSingleton() =>_getInstance(); static PageSingleton get instance => _getInstance(); static PageSingleton _instance; PageSingleton._internal(); static PageSingleton _getInstance() { if (_instance == null) { _instance = new PageSingleton._internal(); } return _instance; }}

在动态页面中使用单例：

import 'package:fair/fair.dart';import './PageSingleton.dart';import './Person.dart';import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';
@FairPatch()class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.data}) : super(key: key) { }
 dynamic data;
 @override _MyHomePageState createState() => _MyHomePageState();}
class _MyHomePageState extends State<MyHomePage> { @FairProps() var fairProps;
 static int _example; /// 使用单例 PageSingleton one = PageSingleton.instance; PageSingleton two = PageSingleton.instance;
 Person person = new Person();
 int _counter = 0; var _title; var _title1 = "PageSingleton instance"; var _title2 = "one == null"; var _title3 = "person.age"; var _title4 = "person.name";
 void onLoad() { _title = fairProps['title']; }
 @override void initState() { super.initState(); fairProps = widget.data; onLoad(); }
 void _incrementCounter() { setState(() { _counter++; _title1 = (one == two) ? "one = two is true" : "one = two is false"; _title2 = (one == null) ? "one = null is true" : "one = null is false"; _title3 = "person.age = ${person.getAge}"; _title4 = "person.age = ${person.getName}"; _example = 1; }); }
 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(_title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text('$_title1'), Text('$_title2'), Text('$_title3'), Text('$_title4'), Text('$_example'), Text('$_counter', style: TextStyle( fontSize: 40, color: Color(0xffeb4237), wordSpacing: 0)), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ),  ); }}

新增语法糖

Sugar.switchCase

Sugar.switchCase(_value, [ SugarSwitchCaseObj(reValue: Text("2-ValueTitle"), sugarCase: 2), SugarSwitchCaseObj(reValue: Text("3-ValueTitle"), sugarCase: 3), SugarSwitchCaseObj(reValue: Text("4-ValueTitle"), sugarCase: 4) ], Text("default-ValueTitle"))

Sugar.colorsWithOpacity()

设置颜色透明度

Sugar.colorsWithOpacity(Colors.blue, 0.5)

Sugar.convertToString()

转化为 String

Sugar.convertToString(orginalValue: 0.4444)

近期规划

• 适配Flutter 2.10.x相关版本

• 扩充及优化语法糖

• 增加idea lint插件，协助开发过程中发现问题修改问题

• Fair技术沙龙，预计6月底于各大直播平台进行直播

Fair实验室

热更新平台

动态化方案离不开热更新平台，我们规划在近期会推出以Flutter和Dart Server为主的热更新平台，实现开发者0成本接入Fair热更能力。

线上动态化

我们也将尝试使用low code的形式，以在线化工具为基础，进行线上的Fair动态化编辑，提升整体开发效率。

1

Fair简介

Fair是为Flutter设计的动态化框架，通过Fair Compiler工具对原生Dart源文件的自动转化，使项目获得动态更新Widget Tree和State的能力。

创建Fair的目标是支持不发版（Android、iOS、Web）的情况下，通过业务bundle和JS下发实现更新，方式类似于React Native。与Flutter Fair集成后，您可以快速发布新的页面，而无需等待应用的下一个发布日期。Fair提供了标准的Widget，它可以被用作一个新的动态页面或作为现有Flutter页面的一部分，诸如运营位的排版/样式修改，整页面替换，局部替换等都可以使用。

2

Fair分层架构

Fair 架构由2部分组成，1为同Kraken和MXFlutter的App运行环境，2为Fair Compiler把Dart源文件编译成DSL和JS动态产物的工具。结构如下：

Fair 框架中Widget构建、数据绑定以及基本的逻辑（if、List Map…）处理都在Dart域完成，留给JS侧的只有基本数据类型、运算和方法调用处理。

03

快速接入

1. 添加依赖

推荐将 fair 下载到本地，通过 path 相对路径进行依赖。假设 fair 项目和您自己的项目位于同一个文件夹下面：

# add Fair dependencydependencies: fair: 2.3.0
# add compiler dependencydev_dependencies: build_runner: ^2.0.0 fair_compiler: path: ../fair/compiler # switch "fair_version" according to the local Flutter SDK versiondependency_overrides:  fair_version: 2.0.6+1

通过切换 flutter_version 版本进行版本兼容。例如，将本机切换为 flutter 2.0.6 后，Fair 需要同步切换

# switch to another stable flutter versiondependency_overrides: fair_version: path: ../fair/flutter_version/flutter_2_0_6

2. 使用 Fair

见做法是作为 App 的根节点，如果不是全局采用也可以作为子页面的根节点

void main() { WidgetsFlutterBinding.ensureInitialized();
 FairApp.runApplication( _getApp(), plugins: { }, );}
dynamic _getApp() => FairApp( modules: { }, delegate: { }, child: MaterialApp( home: FairWidget( name: 'DynamicWidget', path: 'assets/bundle/lib_src_page_dynamic_widget.fair.json', data: {"fairProps": json.encode({})}), ),);

每一个动态组件由一个FairWidget表示。

FairWidget( name: 'DynamicWidget', path: 'assets/bundle/lib_src_page_dynamic_widget.fair.json', data: {"fairProps": json.encode({})}),

4

Fair资料

Fair资料

• Flutter动态化框架Fair文档上线&开源倒计时

• Flutter动态化框架Fair的设计与思考

• Fair 2.0 逻辑动态化开源了！

• Fair逻辑动态化架构设计与实现

• Fair逻辑动态化通信实现

• Fair下发产物-布局DSL生成原理

• Fair 逻辑语法糖设计与实现

• Fair热更新设计与实现

• Fair在安居拍房App中的实践

• Flutter 动态化项目评测

• Fair 在 58 同城拍客 App 中的实践

5

2022规划

• 主版本计划

• null-safe 版本支持，预计4月22日上线

• Flutter 2.8.0版本适配，预计5月中旬上线

• Flutter 2.10.0版本适配，预计6月初上线

• IDE 语法检测和提示插件

• 丰富语法糖

• 热更新平台

• Dart Server工程搭建

• Flutter Web工程搭建

• 补丁/资源管理

• 项目管理

• 移动端 Update&Download

• 线上动态化

• Flutter Web工程搭建

• Dart Server工程搭建

• Action编辑

• 代码编辑

• 组件编辑

• 页面编辑

• 工程编辑

• Flutter效果预览

• Fair DSL预览

  
  

6

欢迎贡献

欢迎大家使用 Fair，也欢迎大家为我们点亮star

Github地址：https://fair.58.com
Fair官网：https://fair.58.com

通过Issue提交问题，贡献代码请提交Pull Request，管理员将对代码进行审核。

对Fair感兴趣的小伙伴，可以加入交流群。

微信入群：

请先添加58技术小秘书为好友

备注fair后由小秘书邀请进群

本文分享自微信公众号 - 58技术（architects_58）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。