Flutter Fair access

add dependencies

It is recommended to import in the form of 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

At present, Fair supports most versions of Flutter 3.3.x and below. If you encounter any problems, you can contact us through the community and ISSUE

Flutter version switching

Version compatibility by switching flutter_version versions. For example, after switching the machine to flutter 2.0.6, Fair needs to be switched synchronously

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

use Fair

The steps to access Fair in the App are as follows:

Add FairApp as the top-level node that needs to be animated

The common practice is to use it as the root node of the App, if it is not used globally, it can also be used as the root node of the sub-page

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({})}),
  ),
);

Add dynamic components

Each dynamic component is represented by a FairWidget.

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

According to different scene demands, FairWidget can be mixed and used

1. Can be mixed as different components
2. Generally as a full screen page
3. Support nested use, that is, it can be partially nested under a normal Widget, or it can be nested under another FairWidget

For related example details, please see the example code