Props Annotations

WubaNovember 19, 2022Less than 1 minute

Fair @props annotation usage introduction

1. When fairwidget needs to accept external parameters for page drawing, fairwidget provides data parameters for receiving external parameters

      ///name The unique id of the page, each FairWidget uses a different name, and fairPath is used here temporarily
      ///As name
      name: fairPath,
      path: fairPath,

      ///The data transfer here needs to use a map with fairProps as the key, fixed writing method
      ///fairArguments can be the jsonString of the model, it is recommended to use
      ///jsonEncode is converted to jsonString
      data: {
        'fairProps': jsonEncode(fairArguments),

2. Declare in the widget marked with @FairPatch() annotation that needs to be converted into a fair file

class _FairPropsWidgetState extends State<FairPropsWidget> {

  /// Variables that receive data parameters need to be marked with the FairProps annotation
  var data;
  ...... omitted here

Use the FairProps annotation to declare member variables that need to be used to receive external parameters, and the variable type uses var

3. Use the received props in the widget

///The variable that widget needs to use, please use the method declaration and then use it
 String fairText(){
    return data["fairText"];

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(),
      body: Container(
        child: Center(
          child: Text(fairText(), style: TextStyle(color:, fontSize: 20),),

If variables need to be used in fairwidget, they need to be declared as methods and then used. The received props data will actually be converted into map type. Through js binding, users don't need to care, they need to use the data in the map, just declare it as a method Get, and then use this method in the page widget to get the data and fill it.

Last update:
Contributors: sunzhe03