Dynamic Logic Communication Implementation in Fair 2.0

Fair 2.0 is a dynamic framework for Flutter that enhances the original Fair 1.0 by introducing full logic dynamicization. After the Dart source is compiled, each file yields a JSON layout and a JavaScript logic file, which must be linked through a unique key ("#FairKey#") stored in a global collection.

1. Architecture Standardization – The framework defines a global GLOBAL object to manage all JS objects, replacing the placeholder key with a concrete value before sending to the native side.

// This object is used for global management of each JS object
let GLOBAL = {};
// '#FairKey#' will be globally replaced before sending
GLOBAL['#FairKey#'] = {
    // converted JS content, including variables and methods
};

2. Communication Protocol Implementation – Communication between JS and Dart relies on Flutter’s message channels (BasicMessageChannel, MethodChannel, EventChannel) for asynchronous messages and dart:FFI for synchronous calls. Native acts as a message forwarder, injecting methods for JS‑to‑native calls and vice‑versa.

3. JS File Loading and Release – JS files are loaded by reading local or network resources, wrapping them in a JSON string, and invoking a native method via MethodChannel. Upon successful loading, native notifies Dart. Release occurs when a widget’s onDispose triggers a Dart method that calls native to remove the JS object from the global collection.

// Load JS flow
1. Read JS data
2. Wrap into JSON string
3. Call native load method via MethodChannel
4. Native loads JS and notifies Dart

4. Data Binding – After JS is loaded, Dart retrieves bound variables and functions using getBindVariableAndFunc . Each FairWidget has a fixed key that matches the JS object, enabling Dart to request variable values or invoke methods. Data changes are sent back to Dart only when setState is called on the JS side.

{
    "func": ["methodA", "methodB"],
    "variable": {
        "varA": "valueA",
        "varB": "valueB"
    }
}

5. Message Dispatch – Messages are categorized by the funcName field. JS can send asynchronous messages via invokeFlutterCommonChannel or synchronous ones via dart:FFI. Dart processes incoming messages, dispatches them to the appropriate FairWidget based on pageName , or forwards them to user‑defined plugins.

6. Third‑Party Extensions – When Dart‑side functionality (e.g., network requests, camera access) is not supported in JS, developers implement a plugin by extending IFairPlugin , registering methods, and exposing them to JS. Example code shows a FairPhotoSelector plugin with Dart and JS sides and registration in fair_basic_config.json and the main function.

// Dart side plugin example
class FairPhotoSelector extends IFairPlugin {
  Future
getPhoto(dynamic map) async {
    return Future.value();
  }
  @override
  Map
getRegisterMethods() {
    var functions =
{};
    functions.putIfAbsent('getPhoto', () => getPhoto);
    return functions;
  }
}

// JS side usage example
FairPhotoSelector().getPhoto({
  'pageName': '#FairKey#',
  'args': {
    'type': 'album',
    'success': (resp) { /* handle success */ },
    'failure': () { /* handle failure */ }
  }
});

The article concludes with a summary of the communication flow, class relationships, and an invitation for readers to provide feedback or participate in a giveaway.