# Flutter Fair接入

# 添加依赖

通过yaml添加依赖配置

# 添加 Fair 依赖
dependencies:
  fair: ^0.2.0
# 添加编译器依赖
dev_dependencies:
  build_runner: ^1.4.0
  fair_compiler: ^0.2.0
1
2
3
4
5
6
7

为了方便接入&体验Fair框架,请确认你的Flutter运行环境,Fair基于Flutter 1.20.4开发,目前已适配至1.22.x, 推荐使用v1.22.5体验

后续将继续支持最新稳定版本。目前支持版本(如遇问题,Issue反馈):

Flutter版本 Dart版本
Flutter 1.22.4/1.22.5 Dart 2.10.4
Flutter 1.20.4 Dart 2.9.2
Flutter 1.17.3 Dart 2.8.4
Flutter 1.12.13+hotfix.9 Dart 2.7.2

https://flutter.dev/docs/development/tools/sdk/releases?tab=macos (opens new window)

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

# Switch to another stable flutter version
dependency_overrides:
  fair_version:
    git:
      url: https://github.com/wuba/fair.git
      ref: master
      path: fair_version/flutter_1_12_13
1
2
3
4
5
6
7

# Fair接入

在App中接入Fair步骤如下:

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

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

void main() {
  runApp(
    FairApp(
      child: MaterialApp(home: App())
    ),
  );
}
1
2
3
4
5
6
7

2.添加动态组件

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

FairWidget(
  type: "video_card",
  data: {
    "url": 'assets/bundle/video_card.json',
  },
)
1
2
3
4
5
6

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

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

相关示例详情,请查看example代码