Fair 2.0 release! What’s new

# How to add widgets

By writing a component mapping table, Fair can support more widgets, either from the Flutter framework or as third-party components.

# hand written

Execute createBinding to create a Binding object for registration:

FairApp(
  manual: createBinding(
    widget: {
        "MyWidget": CustomTag(key: props['key'], text: props['text']),
    },
  ),
));

// custom component
class CustomTag extends StatelessWidget {
  final String text;

  const CustomTag({Key key, this.text}) : super(key: key);

  
  Widget build(BuildContext context) {
    return Text(text);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Then in the DSL you can use:

{
  "className": "CustomTag",
  "na":{ "text":" Hello World"}
}
1
2
3
4

# Automatic generated

If there are more components, or the structure is more complex, the efficiency of handwriting is lower. You can use the @FairBinding() annotation to automatically generate code for you.

First add an annotation to the component

import 'package:fair/fair.dart';
import 'package:flutter/widgets.dart';

()
class CustomTag extends StatelessWidget {
  final String text;

  const CustomTag({Key key, this.text}) : super(key: key);

  
  Widget build(BuildContext context) {
    return Text(text);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Then execute

flutter pub run build_runner build
1

The generated code is located in src/generated.fair.dart;

Finally bind the automatically generated code.

import 'src/generated.fair.dart';

FairApp(
  generated: AppGeneratedModule(),
));
1
2
3
4
5

# for tripartite component

In actual development, we will use many third-party Widgets, how to generate components for them? The most direct way is to write it manually on demand, or it can be automatically generated with the help of our framework.

Bind the package path of the three-party component on the FairBinding annotation. At this time, when Fair generates the mapping table for the component, it can also generate the bound three-party component mapping synchronously.

For example we generate a component table for convex_bottom_bar:

@FairBinding(packages: 'package:convex_bottom_bar/src/bar.dart',)
class VideoCard extends StatelessWidget {
}
1
2
3

Last Update: 6/28/2022, 4:40:25 PM
Copyright © 2020 58.com | Powered by The Fair Authors