This article lists the problems associated with using Flutter in project development, how to use Flutter Module to integrate Flutter into existing projects, and analyzes its principles.

A recent commercial project, written entirely using Flutter, has a pit in it that only those who have written Flutter can appreciate.

1. Problems with the Pure Flutter project

Before I discuss the issue of the pure Flutter project, let me state my opinion (only the pure Flutter project, current date is 26 June 2018, not excluding the development of Flutter, to change my opinion) :

  • For individual developers, pure Flutter can be used to develop apps;
  • For small teams, pure Flutter is not recommended. Problems with Flutter cannot be solved, which is a waste of time.
  • For commercial projects, it is not recommended to use pure Flutter, which is not good for the experience and takes a lot of time to bury.
  • Pure Flutter is not recommended for hardware-dependent projects.

As for the original intention of using Flutter, I believe that most leaders are motivated by increased productivity. However, as far as our project is concerned, if we use Native to write in the same time, I don’t think there is much difference in the progress between the two. Maybe the Native end will be faster. Some of the controls that are common in Flutter currently do not meet the requirements. They often take a lot of time on the wheel, but very little time on the business level.

1.1 Some existing problems

  • Adaptation issues: Flutter is cross-platform, but it doesn’t perfectly solve the problem of screen differences. There’s actually some adaptation that needs to be done;

  • Performance issues: This issue is particularly prominent at present, and some lag issues can occur on some low performance Android phones. In some high-end models, some transition animation, the effect is not particularly ideal, once involved in some complex pages, switching pages will appear obvious lag problem;

  • Hardware-related issues: This is also a problem that Flutter needs to be addressed urgently. The quality of third-party hardware-related plug-ins is uneven, and the quality of official plug-ins is also questionable. For example, the official camera plug-in, various crash problems.

  • Lifecycle issues: The plug-in layer’s monitoring of the lifecycle is app-level and cannot be specific to a particular page. Flutter controls also have no clear concept of a lifecycle, i.e. two or three state transitions, as in React, let alone Native.

The above problems are actually encountered in the project, of course, some problems can be avoided by changing the implementation means, some of the wheels take some time to build. In the early stages of a new technology, especially one that is cross-platform, the choice of all in should be considered twice.

1.2 prospect

This is not to say that Flutter is bad. I would be very happy to use Flutter if it is ecologically mature. The technology currently looks very attractive. Aside from feeling like a Web developer, it’s not that much of a burden to write.

Mobile terminal technology is now in a very mature and stable period, so cross-platform technology becomes so urgent. The cost of simply convening two teams to develop two terminals is indeed quite high at present, especially for some products with low daily life.

Some time ago, the much-publicized news that Airbnb abandoned RN caused some uncertainty about RN and its cross-platform technology. Cross-platform technology has always been a corporate need, not an individual programmer need. Moreover, no technology can ignore the commercial impetus behind the platform. I am not a fan of cross-platform technology, and I personally have always felt that cross-platform is a bogus proposition.

The pursuit of pure cross-platform is a dead end, and the pursuit of common ground in platform differences is the big way out. I think this is why Flutter was implemented to integrate Flutter into existing projects.

2. Use Flutter in existing projects

The authorities have been working hard to make Flutter better accessible to existing mobile apps (iOS/Android). If this fails, few commercial projects will want to use Flutter, as RN does.

2.1 the Android end

The Android solution is a bit more stable at the moment, but the performance efficiency is still a concern. Therefore, this paper mainly introduces a relatively stable solution on Android terminal at present, which is to adopt the Flutter Module template.

2.1.1 Switching a Flutter Branch

The version of Flutter that we installed by default is the beta. The current (29 June 2018) release does not support template functionality for incorporating the Flutter Module into existing projects.

flutter channel

The average user will see the following output:

Flutter channels:
* beta
  dev
  master
Copy the code

So, let’s switch to the Master branch.

flutter channel master

Then run the update command

flutter upgrade

2.1.2 Creating a Flutter Module Template

This feature was released in the Master branch on June 22, 2018, and is currently only available in the early Preview release. We created the template project in the same directory as the Android project directory.

flutter create -t module flutter_module

The project directory created has two hidden folders,.android and.ios. Android contains some code that we need to use later, such as the encapsulated Java code for Flutter and FlutterFragment.

2.1.3 Adding a Flutter Module to an Android project

Modify settings.gradle in the root directory of your Android project to add the Flutter Module as a subproject

include ':app'                                     // assumed existing content
setBinding(new Binding([gradle: this]))                                 // new
evaluate(new File(                                                      // new
  settingsDir.parentFile,                                               // new
  'flutter_module/.android/include_flutter.groovy'                      // new
))                                                                      // new
Copy the code

Sync to see that two modules have been added to the project. One of these is the Module of Flutter, which contains some simple encapsulation for Java code to call. The other module is the package_info module, which is a Flutter plugin that gets the app name, package name, version, etc.

Add dependencies in your app’s build.gradle

dependencies {
  implementation project(':flutter')
Copy the code

Sync the Flutter Module. If nothing goes wrong, the Flutter Module should be added to the Android project.

2.1.4 Java Code calls the Flutter Module

Add a Flutter View to the page using the Java API in the Flutter Module.

val flutterView = Flutter.createView(
     this@MainActivity,
     lifecycle,
     "route1"
 )

 val layout = FrameLayout.LayoutParams(600, 800)
 layout.leftMargin = 100
 layout.topMargin = 200
 addContentView(flutterView, layout)
Copy the code

The above code is added to a text click event where the FlutterView can be seen as a container for Flutter code presentation. The section shown 600 wide and 800 high is actually generated by the code for Flutter. Route1 is written into the Flutter, creating a Container with a green background. The following code

case 'route1':
        return Container(
          child: Center(child: Text('Route 1\n${packageInfo.appName}')),
          color: Colors.green,
        );
Copy the code

When running on a real machine, the effect was terrible. After clicking on the text, the screen would be black and then the FlutterView would be added to the page. The whole process was very slow, which was definitely not usable in a project.

Now that Android has completed the process of invoking the Flutter code, let’s review the process:

  1. Switch the Flutter branch to Master. Currently, there is no template project on the Beta branch.
  2. Generate Flutter Module project;
  3. Modify the configuration of the Android code to add the Flutter Module to the Android project.
  4. Write the relevant Flutter code in the template project lib and call it in Android.

2.2 Convert the Flutter project to Module

This is currently in the experimental stage, if you are willing to try, you can also follow the official example to go through, but you had better be prepared, the official document said that there will be a series of problems, so I will not make further attempts. The whole process is not complicated, but also needs to switch to the master branch. If this scheme is stable, it will certainly be more convenient than the above module mode.

Official step portal

The iOS 2.3 end

Official step portal

If you want to try it, you need to switch to the Master branch.

2.4 about FlutterView

Common at the plugin level, FlutterView is a Java API for the Flutter layer. It can actually be viewed as an Android View that contains the contents of a Flutter. For example, to encapsulate the camera as a Flutter control, you need to export the preview to FlutterView with the help of FlutterView.

FlutterView also played an important role in integrating Flutter into Native project. The output of Flutter layer content is also realized through FlutterView.

Inherited from the SurfaceView, FlutterView is a hotchpotch that contains or listens to as many events as possible, such as keyboards, physical keys, life cycles, broadcasts, Surface callbacks, vertical screen switches, and so on. Basically add all possible events or states to a View on Android so that the Flutter layer can know as many states and callbacks as possible.

FlutterView removes all kinds of listening events, and the actual internal work is realized by FlutterNativeView. This is essentially a plugin interface that Native calls the Flutter layer and communicates with each other via the MethodChannel.

2.5 the principle

By observing the Flutter module in the Flutter module, we can see that it is essentially called through the MethodChannel. This is a plugin capability provided by Flutter officially. It does not mean that Flutter can only be called in one direction, but can also be called in the Native side of Flutter.

However, this call to the Flutter layer is asynchronous, so far the effect of calling the Flutter layer at the Native end is not ideal. At present, the author is also testing under debug, which should be better under release environment. If Flutter needs to be integrated into a Native project, optimizations, such as early initialization, need to be made.

3. Other methods

How do other companies implement this mix before the Flutter Module is released? As mentioned above, I think it’s all using FlutterView. If we didn’t rely on the Flutter Module and introduced the Flutter library in Native, we could write pages directly using FlutterView, which is not a difficult thing in itself. The difficulty is to optimize the performance to get to the online conditions.

MethodChannel, the way Natvive communicates with Flutter, gives this possibility. Hopefully, Flutter officials can improve this blending mode.

Finally, it is inhuman to create wheels inside a Flutter.

4. The latter

My project on Flutter learning, Github, contains my articles on Flutter learning. It will be updated regularly and some learning demos will be uploaded. Welcome to follow.

Reference 5.

  1. Add Flutter to existing apps
  2. Upgrading Flutter