FAIR一键接入

Wuba2022年10月12日大约 1 分钟

Flutter Fair接入

添加依赖

推荐使用pub形式引入

# add Fair dependency
dependencies:
  fair: 3.0.0

# add build_runner and compiler dependency
dev_dependencies:
  build_runner: ^2.0.0
  fair_compiler: ^1.4.0
 
# switch "fair_version" according to the local Flutter SDK version
# Flutter SDK 3.3.x(3.3.0、3.3.1、3.3.2、3.3.3、3.3.4、3.3.5、3.3.6) -> flutter_3_3_0
# Flutter SDK 3.0.x(3.0.0、3.0.1、3.0.2、3.0.3、3.0.4、3.0.5) -> flutter_3_0_0
# Flutter SDK 2.10.x(2.10.0、2.10.1、2.10.2、2.10.3) -> flutter_2_10_0
# Flutter SDK 2.8.x(2.8.0、2.8.1) -> flutter_2_8_0
# Flutter SDK 2.5.x(2.5.0、2.5.1、2.5.2、2.5.3) -> flutter_2_5_0
# Flutter SDK 2.0.6 -> flutter_2_0_6
# Flutter SDK 1.22.6 -> flutter_1_22_6
dependency_overrides:
  fair_version: 3.3.0

目前Fair支持Flutter 3.3.x及以下的绝大多数版本,如遇任何问题,可通过社群和ISSUEopen in new window与我们联系

Flutter版本切换

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

# switch to another stable flutter version
dependency_overrides:
  fair_version: 2.0.6

使用 Fair

在App中接入Fair步骤如下:

将 FairApp 添加为需要动态化部分的顶级节点

常见做法是作为 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({})}),

根据不同场景诉求,FairWidget可以混合和使用

  1. 可以作为不同组件混合使用
  2. 一般作为一个全屏页面
  3. 支持嵌套使用,即可以局部嵌套在普通Widget下,也可以嵌套在另一个FairWidget下

相关示例详情,请查看 exampleopen in new window 代码

上次编辑于:
贡献者: sunzhe03