Quick Access

WubaNovember 19, 2022About 1 min

Flutter Fair access

add dependencies

It is recommended to import in the form of pub

# add Fair dependency
  fair: 3.0.0

# add build_runner and compiler dependency
  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
  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 ISSUEopen in new window

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
  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() {

    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.

  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 exampleopen in new window code

Last update:
Contributors: sunzhe03