Mobile Development 12 min read

Fair 2.0: Complete Integration and Usage Guide for Flutter Projects

This article provides a step‑by‑step tutorial on integrating the Fair 2.0 dynamic framework into Flutter applications, covering dependency setup, widget conversion, bundle generation, runtime loading, parameter passing, navigation, plugin bridging, performance evaluation, update strategies, security checks, and practical lessons learned from its deployment in the 58 拍客 app.

58 Tech
58 Tech
58 Tech
Fair 2.0: Complete Integration and Usage Guide for Flutter Projects

Fair 2.0 is a dynamic framework for Flutter that enables runtime updates of Widgets by converting Dart source files through the Fair Compiler, addressing the limited logical dynamism of Fair 1.0.

The guide starts with adding the Fair source code as a dependency (e.g., git clone https://github.com/wuba/fair.git ) and configuring pubspec.yaml with the appropriate fair_version that matches the local Flutter SDK (e.g., flutter_2_5_0 for SDK 2.5.0).

Integration steps include:

Replacing the default runApp(MyApp()) with WidgetsFlutterBinding.ensureInitialized() and wrapping the root widget with FairApp .

Annotating target widgets with @FairPatch() to mark them for dynamic bundling.

Running flutter pub run build_runner build to generate the bundle resources, which are placed under project → build → fair and consist of a JavaScript file (logic) and a JSON file (layout DSL).

Generated bundles can be loaded at runtime using the FairWidget component, specifying the bundle path in the assets directory for local testing or a remote URL for production.

For communication between dynamic pages, two annotations are provided:

@FairWell – parameters can participate in logical operations.

@FairProps – parameters are passed as a Map and cannot be used in logic.

Navigation between dynamic pages is recommended via named routes (e.g., Navigator.pushNamed ) after registering the route table.

Local widgets that need to be referenced inside a dynamic page are marked with @FairBinding (or @FairBinding(package) for third‑party SDK widgets), which generates a mapping class ( AppGeneratedModule ) that must be registered in FairApp .

Reusable logic can be extracted into a class extending FairDelegate and registered in FairApp to reduce Dart‑JS communication overhead.

To bridge third‑party SDK capabilities, implement IFairPlugin , register the plugin methods via getRegisterMethods() , and add the plugin to FairApp .

The article also presents a real‑world case study of integrating Fair into the 58 拍客 app, showing before‑and‑after UI screenshots that demonstrate pixel‑perfect rendering.

Four update strategies are discussed:

Synchronous update – checks version on page entry, downloads if needed, then displays.

Silent update – displays cached bundle immediately and updates asynchronously.

Pre‑load + synchronous.

Pre‑load + silent.

Security of bundle resources is ensured by verifying a checksum (MD5 or SHA‑256) calculated on the server and re‑computed on the client after download; mismatched checksums abort loading. The checksum is typically encrypted (e.g., asymmetric encryption) before transmission.

A fallback mechanism is implemented where the server can decide to load either the dynamic bundle or the native Flutter widget, protecting against unknown runtime errors.

Performance measurements after integration show a modest increase in memory usage (≈22 MB on Android, ≈17.9 MB on iOS) and negligible impact on startup time (≈0.03 s on Android, ≈0.1 s on iOS), while maintaining smooth UI interactions.

Key takeaways from the 58 拍客 deployment are:

Fair preserves native Flutter development habits.

Widget conversion requires only a few annotations, making migration fast (≈2 days for three pages).

Generated bundles are small (≈8 KB for three pages), keeping download overhead low.

Developers are encouraged to try Fair, star the repository, and join the community via the provided WeChat contact.

Mobile Developmentperformancesecuritydynamic UIHot UpdateFAIR
58 Tech
Written by

58 Tech

Official tech channel of 58, a platform for tech innovation, sharing, and communication.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.