Mobile Development 10 min read

Fair 2.5.0 Release: New Features, Demo, and Usage Guide for the Flutter Dynamic Framework

The article introduces Fair 2.5.0—a Flutter‑based dynamic framework—detailing its project overview, GitHub link, version features such as Flutter 2.8.x adaptation, Dart2JS singleton support and new syntax‑sugar APIs, demo improvements, code examples, roadmap, quick‑start instructions, resources and contribution information.

58 Tech
58 Tech
58 Tech
Fair 2.5.0 Release: New Features, Demo, and Usage Guide for the Flutter Dynamic Framework

Fair 2.5.0 Release

Project Name: Fair 2.0 GitHub: https://github.com/wuba/fair Project Overview: Fair is a dynamic framework designed for Flutter that compiles Dart source files into DSL/JS, enabling hot‑update of widget trees and state without releasing new app versions.

Version Features (2.5.0)

Fully compatible with all Flutter 2.8.x versions.

Dart2JS now supports parsing singletons.

Added syntax‑sugar APIs: Sugar.switchCase , Sugar.colorsWithOpacity , Sugar.convertToString , etc.

Demo

The example project structure has been optimized for newcomers. A new fair/example directory provides standard usage of Fair APIs.

New Function Usage

Dart2JS Singleton Support

Previously, singleton references could not be parsed by JS. The new support allows direct use of singletons in dynamic pages.

Code example (singleton definition):

class PageSingleton {
factory PageSingleton() => _getInstance();
static PageSingleton get instance => _getInstance();
static PageSingleton _instance;
PageSingleton._internal();
static PageSingleton _getInstance() {
if (_instance == null) {
_instance = new PageSingleton._internal();
}
return _instance;
}
}

Using the singleton in a dynamic page:

import 'package:fair/fair.dart';
import './PageSingleton.dart';
import './Person.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
@FairPatch()
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.data}) : super(key: key);
dynamic data;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State
{
@FairProps()
var fairProps;
static int _example;
// Use singleton
PageSingleton one = PageSingleton.instance;
PageSingleton two = PageSingleton.instance;
// ... UI code ...
}

New Syntax Sugar

Sugar.switchCase

Sugar.switchCase(_value, [
  SugarSwitchCaseObj(reValue: Text("2-ValueTitle"), sugarCase: 2),
  SugarSwitchCaseObj(reValue: Text("3-ValueTitle"), sugarCase: 3),
  SugarSwitchCaseObj(reValue: Text("4-ValueTitle"), sugarCase: 4)
], Text("default-ValueTitle"))

Sugar.colorsWithOpacity()

Sugar.colorsWithOpacity(Colors.blue, 0.5)

Sugar.convertToString()

Sugar.convertToString(orginalValue: 0.4444)

Roadmap

Adapt Flutter 2.10.x related versions.

Expand and optimize syntax‑sugar APIs.

Add IDE lint plugin for issue detection.

Fair technical salon livestream planned for end of June.

Fair Architecture

The framework consists of two parts: (1) a runtime environment similar to Kraken/MXFlutter that executes dynamic pages, and (2) the Fair Compiler that transforms Dart source files into DSL/JS assets. Widget construction, data binding, and basic logic are performed in the Dart domain, while the JS side handles only primitive data types and method calls.

Quick Start

1. Add Dependency

# add Fair dependency
dependencies:
  fair: 2.3.0

# add compiler dependency
dev_dependencies:
  build_runner: ^2.0.0
  fair_compiler:
    path: ../fair/compiler

# switch fair_version according to local Flutter SDK version
dependency_overrides:
  fair_version: 2.0.6+1

Switch Flutter version and adjust fair_version accordingly, e.g. for Flutter 2.0.6:

# switch to another stable flutter version
dependency_overrides:
  fair_version:
    path: ../fair/flutter_version/flutter_2_0_6

2. Use Fair

Initialize Fair as the root of the app (or as a sub‑page root):

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  FairApp.runApplication(
    _getApp(),
    plugins: {},
  );
}

dynamic _getApp() => FairApp(
  modules: {},
  delegate: {},
  child: MaterialApp(
    home: FairWidget(
      name: 'DynamicWidget',
      path: 'assets/bundle/lib_src_page_dynamic_widget.fair.json',
      data: {"fairProps": json.encode({})},
    ),
  ),
);

Each dynamic component is represented by a FairWidget :

FairWidget(
  name: 'DynamicWidget',
  path: 'assets/bundle/lib_src_page_dynamic_widget.fair.json',
  data: {"fairProps": json.encode({})},
);

Resources

Flutter dynamic framework Fair documentation and open‑source countdown.

Design and thinking behind Fair.

Fair 2.0 logic dynamicization open‑source announcement.

Technical articles on architecture, DSL generation, syntax‑sugar design, hot‑update design, and real‑world case studies (58 Tongcheng, 58 Paike, etc.).

Contribution

We welcome everyone to use Fair, star the repository, and contribute code via pull requests. For issues, submit an Issue; maintainers will review the code. Join the community group for further discussion.

GitHub: https://fair.58.com Official site: https://fair.58.com

DartFlutterMobile DevelopmentHot Updatesyntax sugarDynamic FrameworkFAIR
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.