Author: Tencent NOW Live – Koudleren (Ren Xiaoshuai)

preface

Previously, the mixed development mode of Flutter and Native has been described. Flutter exists as a Module of Native engineering, which can effectively isolate Flutter and Native physically. However, as Flutter carries more and more business, More and more interfaces interact with Native, bringing many management problems, so we urgently need to adopt a new development mode, this paper will introduce how to do NOW live broadcast.

1. Existing problems

  1. Because interactive interfaces involve multiple terminals including Flutter, Android and iOS, the increasing number of interfaces leads to more and more complex projects and codes, resulting in high maintenance costs and difficult management.
  2. Many interfaces are written together, logically coupled, and modification of one may affect other logic, which is not easy to reuse.
  3. Unit testing is not convenient

2. The improvement points

Componentized development of Flutter will have the following advantages:

  1. Modularized functions, mutual independence, convenient management
  2. Modules do not affect each other and have low coupling. Some modules irrelevant to business can be opened source for other apps to provide code reuse.
  3. The use of componentized development, development of each other, can improve the efficiency of development.
  4. Unit testing convenience

The following describes the specific content of Flutter componentization development.

3. Start with Platform Channel

  • define
The Platform Channel provides a mechanism for Dart and Platform to communicate with each other, connecting Flutter, Android, and iOS.Copy the code

In the development of mobile H5, the functions provided by WebView itself are often insufficient. In order to solve this problem, JsBridge is introduced, that is, a method of data interaction between Web and Native, which can easily extend the functions of Native to WebView for rapid development. The same usage of Flutter as jsbridge exists, that is, Platform Channel. We can connect Flutter and Native together conveniently through Platform Channel. The architecture diagram is as follows:

In the Channel

  1. Client sends messages
  2. Host receives the information and returns the result
  3. And messages and responses are delivered asynchronously
  4. Flutter and Natvie can be client and host to each other. Information transfer is bidirectional

It is also very simple to implement a Channel in a Flutter. If a Flutter is a client and a Native Host, you only need to:

  1. Declare a Channel in the Flutter layer, send a message to Native, and wait for the result to return
The static const platform = const MethodChannel (' samples. Flutter. IO/', '); int result = await platform.invokeMethod('getBatteryLevel');Copy the code
  1. Register a Channel listener at the Native layer. When a message is received from the Flutter layer, the result is returned to the Flutter
new MethodChannel(getFlutterView(),"samples.flutter.io/battery").setMethodCallHandler(
new MethodCallHandler() {
@Override
public void onMethodCall(MethodCall call, Result result) {
if (call.method.equals("getBatteryLevel")) {
returnbatteryLevel; }}});Copy the code

From this we can see that writing a Platform Channel of Flutter is very simple and lightweight. Platform Channel also has the following advantages over H5’s JSBridge:

  1. Platform Channel is a built-in function of Flutter, requiring no additional development. It has a simple interface and is easy to call.
  2. Platform Channel has better performance than JSBridge
  3. More importantly, Platform Channel’s underlying implementation is unified and more focused on data transfer. Unlike JSBridge, if jSBridge is implemented in different ways, the code cannot be universal, while Platform Channel can be more universal.

Platform Channel, as part of the connection between Flutter and Native, is very important in the mixed development mode and exists as an important underlying architecture. Therefore, Platform Channel can be treated as a module alone. Separate the Plaform Channel from the UI code in the Flutter project. How do you modularize Platform Channel? A new concept is introduced here: the Flutter Plugin.

4.Flutter Plugin

  • define
A software package that implements Platform Channel code on Android, iOS, and DartCopy the code

Thus a complete Flutter Plugin contains code for three platforms:

  1. Java or Kotlin for Android
  2. ObjC or Swift for iOS
  3. Dart of the Flutter platform

Therefore, Platform Channel can use the Flutter Plugin to implement modularity. This means that some common functions can be applied to different apps, such as login module, image library module, network library module, database module, etc.

Creating a Flutter Plugin is also simple:

  1. Android Studio

After installing the Plugin for Flutter on Android Studio, you can download the following folders:

File -> New -> New Flutter Project... -> Flutter Pulgin

  1. The command line
$ flutter create --org com.example --template=plugin hello
Copy the code

After creating the project, we can implement the Platform Channel functionality we want. So how do we share our Flutter Plugin? For those of you familiar with Android development, you will know the Maven repository. Flutter also has a similar package repository called Pub.

5.Pub

  • define
Pub is the package manager for the Dart language and contains Flutter, AngularDart, and the general Dart program.Copy the code
  • use

We can find the package we want to use at pub.dartlang.org/, such as Protobuf:

On the search results page, find the package we want:

To use it, simply add the package name and version number to the project’s pubspec.yaml:

dependencies:
protobuf: ^ 0.10.4
Copy the code

And run the command line installation package:

$ flutter packages get
Copy the code

It can be used in engineering. How do we offer our own package of the Flutter Plugin to others to use? We need to upload the bag to the Pub.

  • upload

To upload a package to Pub, there are three steps:

  1. Make sure that the relevant configuration in pubspec.yaml is filled in correctly, and readme. md and Changelog.md should also be complete.

  2. Before uploading, run the dry-run command to check whether all contents can pass the detection

$ flutter pacakges pub publish --dry-run
Copy the code

3. Upload

$ flutter packages pub publish
Copy the code

Add dependencies to pubspec.yaml as follows:

Dependencies: Package name: version numberCopy the code

6.Private Pub

Another problem with uploading your team’s library to Pub is that Pub is a public repository and everyone can see it, which is very bad because projects within the team don’t want others to see them. We need a Private Pub to manage our team’s libraries.

I set up a private Pub in the company, and the address is:

****** (because it is the company’s internal address, will not be announced)

If you want to use Private Pub, you need the following Settings:

$ export PUB_HOSTED_URL=******
Copy the code

After setting the Settings, you can use the Private Pub.

7. Engineering structure of Flutter

Finally, our engineering structure of Flutter is as follows:

8. Development process

Finally, our development process is as follows:

Platform Channel with single function exists in the form of Project. After development, testing and verification, it is uploaded to the Private Pub. No matter the pure Flutter Project or the hybrid Flutter and Native Project, they can get what they need. Use the desired Flutter Plugin.

conclusion

By analyzing the engineering structure of Flutter, we split the Flutter into two independent modules, Platform Channel and Flutter UI, to clarify the engineering structure of Flutter and further refine the Platform Channel. Package the Platform Channel with a single function into a Flutter Plugin, and build our own private Pub to conveniently manage the Flutter Plugin. This greatly facilitates the development of Flutter, as well as the reuse of our components and the improvement of development efficiency!