FairBinding Annotations

This article will introduce you to the @FairBinding annotation.

In our daily development, we often encounter such a situation that another locally customized Widget is referenced in a Widget.

For such a case, we need to use the @FairBinding annotation to generate a mapping relationship for the local Widget.

Let's explain the specific steps to use it.

Suppose there is a dynamic page: FairBindingSample, I reference a local widget called FairBindingWidget in FairBindingSample.

import 'package:example/fair_widget/fairbinding/fair_binding_widget.dart';
import 'package:fair/fair.dart';
import 'package:flutter/material.dart';

@FairPatch()
class FairBindingSample extends StatelessWidget {
  const FairBindingSample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FairBinding Annotation Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Hello World! ',
            ),
            // Refer to the local custom FairBindingWidget
            FairBindingWidget(),
          ],
        ),
      )
    );
  }
}

At this point, you need to use the @FairBinding annotation and pass in the path of FairBindingWidget:

@FairBinding(packages: [
  'package:example/fair_widget/fairbinding/fair_binding_widget.dart',
])
void main() {
  // runApp(MyApp());

  WidgetsFlutterBinding.ensureInitialized();

  FairApp.runApplication(
    FairApp(
      child: MyApp(),
      ......
    )
  );
}

Then, we need to execute a build_runner command to generate the mapping relationship of the custom component FairBindingWidget:

flutter pub run build_runner build

After executing the command, a src directory will be generated in the source code, and a generated.fair.dart file will be generated in the src directory:

Open the file and you can see the mapping relationship of FairBindingWidget:

class AppGeneratedModule extends GeneratedModule {
  @override
  Map<String, dynamic> components() {
    return {
      'FairBindingWidget': (props) => FairBindingWidget(
        key: props['key'],
      ),
    };
  }
  
  @override
  Map<String, bool> mapping() {
    return const {
      'FairBindingWidget': true,
    };
  }
}

Then, we need to register the generated AppGeneratedModule with FairApp:

import 'src/generated.fair.dart' as g;

void main() {
  // runApp(MyApp());
  
  WidgetsFlutterBinding.ensureInitialized();
  
  FairApp.runApplication(
    FairApp(
      child: MyApp(),
      // Register AppGeneratedModule
      generated: g.AppGeneratedModule(),
    )
  );
}

After the registration is complete, the dynamic page can run normally.

In addition, if you refer to a Widget in a third-party SDK, you can also generate a mapping relationship by passing the path to @FairBinding.