Fair plugin

WubaNovember 19, 2022About 1 min

Fair plugin introduction

1.plugin introduction

The plugin is to extend some common functions, so that we can use some functions that fair cannot achieve, and build them into the app through the js level to achieve more rich functions

2.plugin access file copy

  1. Add fair_basic_config.json to the assets directory
//Add the plugin js file path that needs interaction
  "plugin": {
    "fair_basic_plugin": "assets/plugin/fair_basic_plugins.js"
  1. Create a new plugin folder in the assets directory and add the fair_basic_plugins.js file (see fair example for specific files)

  2. Declare the file path to be used in the pubspec.yaml file

    - assets/
    - assets/plugin/

3. Register plugin

      child: MyApp(),
    ///The plugin that needs to be used globally needs to be registered here, and the key name can be arbitrarily not required
    plugins: {
      "FairBasicPlugin": FairBasicPlugin(),

4. Use of plugin

The following uses an example of calling, the class name of the plugin needs to be consistent with the variable name in js, Override getRegisterMethods to register the methods you need to use

///The class name here needs to be consistent with the variable name in js
class FairBasicPlugin extends IFairPlugin {

  static final FairBasicPlugin _fairXPlugin = FairBasicPlugin._internal();


  factory FairBasicPlugin() {
    return _fairXPlugin;

  Future<bool> _makePhoneCall(String phoneNumber) async {
    final Uri launchUri = Uri(
      scheme: 'tel',
      path: phoneNumber,
    return await launchUrl(launchUri);

  Future<dynamic> call(map) async {
    print('FairXPlugin pluginRequest');

    if (map == null) {
    var req;
    bool isDart;
    if (map is Map) {
      isDart = true;
      req = map;
    } else {
      isDart = false;
      req = jsonDecode(map);

    var args = req['args'];
    var pageName = req['pageName'];
    var id = req['id'];

    var responseCallback = args['response'];
    var type = args['type'];
    switch(type) {
      case 'Call':
        var phoneNumber = args['phoneNumber'];
        var result = await canLaunchUrl(Uri(scheme: 'tel', path: phoneNumber));
        if (result) {
          var value = await _makePhoneCall(phoneNumber);
          if (isDart) {
          } else {
            var resp = {
              'pageName': pageName,
              'id': id,
              'response': value,
            return Future.value(jsonEncode(resp));
        } else {
          throw 'Could not call $phoneNumber';

    return Future.value();

  ///Register the method name that needs to be recognized
  Map<String, Function> getRegisterMethods() {
    var functions = <String, Function>{};
    functions.putIfAbsent('call', () => call);
    return functions;


5. Use plugin in fairwidget

The following is a fixed way of writing, declare a method in fairwidget, call the method registered in the plugin in the method, fair js will automatically recognize the binding at runtime, The response is the callback method written in js, and the plugin js file can be modified for special implementations. Generally, no modification is required.

      'pageName': '#FairKey#',
      'args': {
        'type': 'Call',
        'phoneNumber': '15800342502',
        'response': (data) {
          print('response = $data');
Last update:
Contributors: sunzhe03