Flutter Dynamic Full Process Solution—Fair Tool Introduction

Alzzzz — Wed, 22 Feb 2023 09:40:46 +0000

Preface

Flutter is Google's open source cross-platform UI framework, which has become the first choice of more and more developers due to its advantages in "multi-terminal consistency" and "rendering performance". However, as the scale of use increases, in order to solve many rapidly iterative business product lines and needs, dynamics has become an urgent problem to be solved.

Fair is a dynamic framework self-developed by 58. Through the automatic conversion of native Dart source files by the Fair Compiler tool, the project has the ability to dynamically update Widget Tree and State.

Recently, after absorbing the feedback and suggestions from the open source community, we have improved the construction of Fair's supporting tools for the development experience. Let's get to the topic.

Project Background

The Fair supporting tool chain is developed to help developers quickly get started with Fair development, improve Fair development efficiency, and avoid the Flutter syntax that Fair does not support. It mainly includes three parts:

Create Project：Quick create Fair dynamic/carrier project
Template Code：Provide Page/Project template code
Local Hot Update Service：Offline development and use, realize the rapid preview of Fair dynamic function in the development stage

We provide it to developers in the form of dart command line tools and AS plugin.

Flowchart

The use flow chart is as follows:

Instructions for use

Step 1: Tool Installation

Install the Faircli command line tool

dart pub global activate faircli

Install AS plugin

The plugin marketplace is now uploaded. Install it by searching for "FairTemplate" from /Android Studio/Preference/Plugins.

After the preparations are completed, enter the development and use process below.

Step 2: Faircli-Project Creation

Engineering is divided into carrier engineering and dynamic engineering. Dynamic function modules need to be developed in dynamic engineering. The carrier project provides bundle download, loading and basic capability support.

Create dynamic project

faircli create -n dynamic_project_name

dynamic_project_name: dynamic project name

Create vector project

faircli create -k carrier -n carrier_project_name

carrier_project_name: carrier project name

Step 3: IDE Plugin - Function Development

Template code usage

Select a code template to generate the corresponding code file.

In the generated code, secondary development is performed.

One-click packaging

After the function development is completed, the AS plugin can be used for one-click packaging.

Step 4: Start the local hot update service

After the packaging is complete, you can start the local hot update service to preview the development functions.

When the console prints the following information, it means that the local hot update service is successfully started.

developer option

Run the vector project and go to the developer options page.

Enter host to load the bundle list. Select the corresponding bundle for function preview.
Shake the phone to trigger the reload function.

Step 5: IDE Plugin - Upload the bundle to the online environment

Effect

After using the faircli tool to configure the local hot update service, open the developer options on the mobile device, select the local mode, enter the computer ip address, and you can happily preview the fair dynamic effect.

Summary and Outlook

This article mainly introduces the use of Fair's supporting tool chain. The supporting tools solve the current pain points in the use of Fair. In the future, we will continue to pay attention to your feedback and suggestions in the open source community.

Support us

Everyone is welcome to use Fair, and everyone is welcome to light up the stars for us
Github address: https://github.com/wuba/fair
Fair official website: https://fair.58.com/

Contributions welcome

Submit issues through Issue, please submit a Pull Request to contribute code, and the administrator will update the code review.

DEV Community: Alzzzz