In the early days of the Fair framework, we only realized the dynamization of the layout, and there was no way to dynamize some logical operations in the Widget. Therefore, we designed the FairDelegate to register the logic part of the page, and the FairDelegate needs to be built into the basic package in advance middle.

Therefore, if your dynamic statement is that you only need the dynamic of the UI, but not the dynamic of the logic, you can use the FairDelegate method.

Suppose we have a page, click a button on the page, and a Toast pops up:

import 'package:fair/fair.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class FairWellSample extends StatefulWidget {
  const FairWellSample({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _FairWellSampleState createState() => _FairWellSampleState();
}

class _FairWellSampleState extends State<FairWellSample> {

  void onTapShowToast() {
    Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('assets/image/logo.png'),
            Padding(
              padding: EdgeInsets.only(bottom: 40),
              child: Text('click show toast!'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: onTapShowToast,
      ),
    );
  }
}

We now hope to transform this page into a UI part that can be dynamically updated, popping up the dynamic page built into the logic of Toast.

The specific transformation steps are as follows:

step1: Add @FairPatch() annotation

@FairPatch() //here
class FairWellSample extends StatefulWidget {
  const FairWellSample({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _FairWellSampleState createState() => _FairWellSampleState();
}

......

This step is no different from the transformation of other scenarios. As long as it is a dynamic page of Fair, it needs to be annotated with @FairPatch().

step2: For methods that require built-in logic, add @FairWell() annotation

import 'package:fair/fair.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

@FairPatch()
class FairWellSample extends StatefulWidget {
  const FairWellSample({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _FairWellSampleState createState() => _FairWellSampleState();
}

class _FairWellSampleState extends State<FairWellSample> {

  @FairWell('onTapShowToast') //here
  void onTapShowToast() {
    Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );
  }

  ......
}

The @FairWell() annotation needs to pass a String type tag as a unique identifier: @FairWell('onTapShowToast'), which is generally the same as the method name.

step3: Create FairDelegate

Create a new class that inherits FairDelegate:

class FairWellSampleDelegate extends FairDelegate {

  ......
}

Then copy the method marked with @FairWell to FairDelegate:

import 'package:fair/fair.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class FairWellSampleDelegate extends FairDelegate {

  void onTapShowToast() {
    Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );
  }
}

Rewrite the bindFunction method, and register the tag of @FairWell() and the corresponding Function in it:

import 'package:fair/fair.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class FairWellSampleDelegate extends FairDelegate {

  @override
  Map<String, Function> bindFunction() {
    var functions = super.bindFunction();
    functions.addAll({
      'onTapShowToast': onTapShowToast,
    });
    return functions;
  }

  void onTapShowToast() {
    Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );
  }
}

step4: Register our custom FairDelegate in FairApp

void main() {
  // runApp(MyApp());

  WidgetsFlutterBinding.ensureInitialized();

  FairApp.runApplication(
    FairApp(
      child: MyApp(),
      delegate: {
        ///The key name registered by the delegate here must be the same as the name of the Fairwidget page name,
        'fair_well_sample': (ctx, _) => FairWellSampleDelegate(),
      },
    ),
    ......
  );
}

step5: Execute the build_runner command to generate the bundle file

flutter pub run build_runner build

step6: Use FairWidget to load bundle resources

FairWidget(
  //Note: The name of the FairWidget must correspond one-to-one with the key value registered by the delegate.
  name: 'fair_well_sample',
  path: 'assets/fair/lib_fair_widget_fairwell_fair_well_sample.fair.json',
   data: {
      'title': 'FairDelegate Page',
   },
)

Note: The name of the FairWidget must correspond one-to-one with the key value registered by the delegate.