Flutter 快速接入Fair

少点废话

1.了解Fair

Fair，由58同城开源提供，目的是flutter项目上架后动态更新代码，

首先了解一个概念，热更新是flutter打包APK后会讲所有的dart代码生成一个so文件，手机通过读取并执行so文件；基于此，我们可以替换iso文件达到代码的更新，这种方式称之为热更新；但是这种方式被google给限制了，上架后会立即闪退，当然国内的平台是可以通过这种方式进行热更新。

不同与热更新，fair是将代码生成配置文件，然后将配置文件托管到服务器，flutter通过加载服务区的配置文件，动态的生成界面，这种方式简单但是很繁琐，如果Flutter版本更替出现差异，就很麻烦而且容易出bug。

2.前期准备

首先我们到fair的代码库下载最新代码，传送门：https://github.com/wuba/Fair

3.环境搭建

（1）AS安装插件

在setting-plugin，搜索并安装FairTemplate

（2）Fair本地化修改

下载后，我们把一下几个模块给提出来出来，目的是因为这些项目可能会导致包的版本冲突，如果不冲突可以不用管这些，直接引入显示的版本 ,传送门：fair | Flutter package

提出来后，我们用AS打开以下项目

1）annotation模块

打开项目后，在pubspec.yaml中，put get一下，

没报错，下一项

2）compiler模块

这个模块会导致 intl 冲突，因此我们要自己处理下，如果自己的项目没有使用intl，可以忽略

在pubspec.yaml中再将此项修改

put get一下，项目不报错，下一项

3）flutter_verion模块

在里面找到自己Flutter版本试用的，使用AS打开项目

打开后，put get一下发现项目报错，找到报错项注释掉，

这里是因为Flutter版本差异造成的，里面的注释掉可能会导致我们打包的样式出现问题，目前是入门阶段，遇到问题的时候再解决吧

注释完成后，项目不报错，下一项

4）fair模块

打开后，直接把Example目录删掉，里面没啥用；

然后在pubspec.yaml中再将此项修改

fair_version改成你所使用的版本

put get一下，项目不报错，完成

4.开发

（1）引包

在项目pubspec.yaml 配置

复制代码

dependencies:
  
  flutter_localizations:
    sdk: flutter
  intl: any
  ...  
  #fair: ^4.0.0 #热更新
  fair:
    path: ../plugin/fair

dev_dependencies:
  ...  
  build_runner: ^2.0.0
  fair_compiler:
    path: ../plugin/fair_compiler

flutter:
  uses-material-design: true
#  generate: true 

  assets:
    - assets/
    - assets/bundle/

flutter_intl:
  enabled: true

（2）服务端代码

完成后，以下直接贴代码，不解释

在Main.dart里面

复制代码

void main() {
  //如果size是0，则设置回调，在回调中runApp
  if (window.physicalSize.isEmpty) {
    window.onMetricsChanged = () {
      //在回调中，size仍然有可能是0
      if (!window.physicalSize.isEmpty) {
        window.onMetricsChanged = null;
        runMyApp();
      }
    };
  } else {
    //如果size非0，则直接runApp
    runMyApp();
  }
}

void runMyApp() async {
  WidgetsFlutterBinding.ensureInitialized();
  LogUtil.init(isDebug: false);
  await LanManage.si.initialize();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom]);
  Utils.setStatusLight(); //设置状态栏颜色
  // runApp();

  FairApp.runApplication(_getApp(), plugins: {});
}

dynamic _getApp() => FairApp(modules: {}, delegate: {}, child: Phoenix(child: TestMyApp()));


class TestMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget widget1 = const DynamicWidget("TT");
  

    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: Scaffold(
            appBar: AppBar(centerTitle: true, title: const Text("APP")),
            body: Column(children: [
              Image.asset("assets/img.png", width: 200, height: 200),
              widget1,
            ])));
  }
}

@FairPatch()
class DynamicWidget extends StatelessWidget {
  @FairWell('content')
  final String content;

  const DynamicWidget(this.content, {super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
            alignment: Alignment.center,
            margin: const EdgeInsets.only(top: 30, bottom: 30),
            color: Colors.redAccent,
            width: 300,
            height: 300,
            child: Text(content, style: const TextStyle(fontSize: 30, color: Colors.yellow))));
  }
}

以上完成后，在AS的工具栏将代码生成以下

在Terminal视图中，可以看到执行结果

在项目界面中，找到这两个文件，然后放到服务器即可

（3）APP代码

直接贴代码

复制代码

class TestMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget widget2 = FairWidget(
      //这个地方如果是本地测试，直接用绝对路径即可
      //如果是服务器，直接指向json文件即可
      path: "http://xx.xx.xx.xx/app/bundle/lib_main_test.fair.json",
      data: {"content": "VV"},
    );

    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: Scaffold(
            appBar: AppBar(centerTitle: true, title: const Text("APP")),
            body: Column(children: [
              Image.asset("assets/img.png", width: 200, height: 200),
              widget2,
            ])));
  }
}

至此，接入完成，收工！

5.参考资料

Flutter Fair接入 | Flutter Fair