Integrated flutter in existing projects

This article lists the issues that are encountered when using flutter for project development, and how to integrate flutter into existing projects using the Flutter module, and analyzes its rationale.

Recently in a Business project, the full use of the flutter, which the pit, atrial flutter only written by the people can appreciate.

1. Problems with pure flutter projects

Before discussing the pure Flutter project question, I first stated my viewpoint (only limited to the pure Flutter project, current time June 26, 2018, does not rule out the development of flutter, let my viewpoint change):

• For individual developers, you can use pure flutter to develop the early adopters of the app;
• For small teams, do not recommend the use of pure flutter, flutter kicks out of the problem, can not solve, wasting time;
• For commercial projects, the use of pure flutter is not recommended, the experience is not good, a lot of burial pit time.
• The use of pure flutter is not recommended for projects that are strongly related to hardware.

For the purpose of using flutter, I believe most of the leaders are motivated by increased productivity. But at present on our project, the same time, if you use native to write, I think the progress of the two is not much difference, it may be the native end will be faster. At present, some of the most common control functions in flutter are not satisfied, often taking a lot of time on the wheel, but it takes less time on the business level.

1.1 Some of the problems that currently exist

• Adaptation issues: Flutter is a cross-platform, but not a perfect solution to the various screen differences brought about by the problem. In fact, there is a need to do some adaptation;

• Performance issues: The problem is particularly prominent at the moment, and on some low performance Android phones, there are some problems with Kaka. On some high-end models, some transitions animation, the effect is not particularly ideal, once involved in a number of complex pages, switch pages will appear very obvious lag problem;

• Hardware-related issues: This is also flutter need to solve the problem, third-party hardware-related plug-in quality is uneven, the official plug-in quality is also worrying. For example, the official camera plugin, various crash problems.

• Lifecycle issues: The plug-in layer's lifecycle monitoring is app-level and cannot be targeted to a single page. The flutter control also has no clear life cycle concept, that is, two or three states of the switch, not like the life cycle in react, let alone like native in the case.

The above problems are actually encountered in the project, of course, some problems can be avoided by means of transformation, some wheels themselves spend some time to build. The early stages of a new technology, especially the cross-platform technology, are all-in, and need to be reconsidered.

1.2 Foreground

Some of the questions that I said earlier are not that flutter is very bad. If the ecology is very mature flutter, I would be very willing to use, this technology is very attractive at present. It's not much of a burden to write and write and feel like a web developer.

Mobile technology is now in a very mature and stable period, so the cross-platform technology will be so urgent, heart flutter simply to call two team to develop two end, this cost at present is quite high, especially some of the low-life products.

Some time ago, the uproar of Airbnb abandoned the news of Rn, so that everyone on the RN and cross-platform technology produced some uncertainty. Cross-platform technology has always been a corporate-level requirement, not a programmer's personal need. Moreover, any technology can not ignore the business drive behind the platform, I am not a cross-platform technology seekers, I personally have always felt that cross-platform is a pseudo proposition.

The pursuit of pure cross-platform, is undoubtedly a dead end, a flutter platform differences in the pursuit of common points, this is the big way out. I think that's why flutter is going to implement the integration of flutter into existing projects.

2. Use of flutter in existing projects

The official effort to make flutter better access to the existing mobile (ios/android) project is self-evident. If this is not good, there are certainly not too many commercial projects willing to use flutter, just like RN.

2.1 Android Terminal

The Android scenario is a bit more stable at the moment, but the performance efficiency is still worrying. Therefore, this article mainly focuses on the Android side is currently a relatively stable scheme, that is, the use of Flutter module template mode.

2.1.1 Switching Flutter Branch

The flutter version we installed by default is a beta version, and the current (June 29, 2018) version does not yet support the ability to integrate the Flutter module into existing projects.

Flutter Channel

The general user can see the following output information:

Flutter channels:* beta  dev  master

Therefore, we 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 on June 22, 2018 in the master branch, and is now only an early version of preview. We created the template project in a sibling directory of an Android project directory.

Flutter create-t Module Flutter_module

There are two hidden folders under the project directory you created, namely. Android and. iOS. The. Android contains some of the code that we need to use later, such as packaged flutter and flutterfragment Java code.

2.1.3 Add flutter module to Android project

To modify the Settings.gradle of the Android project root directory, add the Flutter module as a subproject to the project

include ‘:app‘                                     // assumed existing contentsetBinding(new Binding([gradle: this]))                                 // newevaluate(new File(                                                      // new  settingsDir.parentFile,                                               // new  ‘flutter_module/.android/include_flutter.groovy‘                      // new))                                                                      // new

Sync, you can find that two module has been added to the project. One of these is the Flutter module, which contains a few simple packages for Java code to invoke. Another is the Package_info module, is a flutter plug-in, its code is very simple, is to get the app name, package name, version and other information.

Add dependencies in the app's Build.gradle

dependencies {  implementation project(‘:flutter‘)

Sync, no accident, there should be no error, this flutter module has been added to the Android project.

2.1.4 Java code calls flutter module

Using the Java API in the Flutter module, add a Flutter view to the page.

val flutterView = Flutter.createView(     [email protected],     lifecycle,     "route1" ) val layout = FrameLayout.LayoutParams(600, 800) layout.leftMargin = 100 layout.topMargin = 200 addContentView(flutterView, layout)

The above code is added to the click event of a text, where flutterview can be seen as a container for Flutter code presentation. The section showing the width 600 high 800 is actually generated by the flutter code. The route1 is written in flutter, which generates a green background of container. The code is as follows

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

Running on the real machine, the effect is very poor, click on the text, will first black screen, and then add this flutterview to the page, the whole process is very slow, this is certainly not able to use in the project.

Here, the entire process of Android calling flutter code has been completed, so let's comb through the process:

1. Switch Flutter branch to master, currently the Beta branch does not contain a template project;
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, which is called in Android.

2.2 Convert a Flutter project to module

This is currently in the experimental phase, if you are willing to try, you can follow the official example to go again, but we better have to be psychologically prepared, the official document said there will be a series of problems, the author does not make further attempts. The whole process is not complicated and needs to be switched to the master branch. If this solution stabilizes, it will certainly be more convenient than the type of module above.

Official Step Portal

2.3 iOS side

Official Step Portal

This is also the experimental phase, and if you want to try it, you need to switch to the master branch.

2.4 About Flutterview

Flutterview is more common at the plug-in level and is a Java API for the flutter layer. It can actually be viewed as a view on the Android side, except that it contains flutter content. For example, to encapsulate a camera into a flutter control, you need to use Flutterview to output the preview to Flutterview.

Integration of Flutter,flutterview in the native project has also played an important role. The output of the flutter layer content is also achieved through Flutterview.

Flutterview inherits from Surfaceview, which is like a hodgepodge that contains or listens to as many events as possible, such as keyboards, physical keys, life cycles, broadcasts, surface callbacks, screen transitions, and so on. Basically, the Android side of a view may exist some of the events or status, all add up, so that the flutter layer can know as many states and callbacks.

Flutterview remove all kinds of monitoring events, the internal actual work is done by the Flutternativeview. Its essence is also a plug-in interface, but native calls the flutter layer, they communicate through Methodchannel.

2.5 principle

By using the Flutter module in flutter modules, we can see that it is essentially called through Methodchannel. This is a plug-in capability that flutter officially provides, not just a one-way call, but also a flutter call on the native side.

However, this call is asynchronous, at present, the native side call flutter layer effect is not very ideal. At present, the author is also under the Debug test, release environment should be better. If you need to integrate flutter in your native project, you also need to optimize, such as early initialization, and so on.

3. Other methods

Before the Flutter module was released, how did other companies generally achieve this kind of mixing? As mentioned above, I feel that we are using the Flutterview. If we do not rely on the Flutter module, the introduction of flutter library in native, the direct use of Flutterview for page writing, this itself is not a difficult thing. Difficult to perform performance optimization to reach the on-line condition.

Methodchannel This kind of communication between natvive and flutter gives a possibility of this kind of mixing. Still look forward to flutter official can make this kind of mixed pattern perfect.

In the end, it is too inhuman to build up a wheel in flutter.

4. Something

I built a flutter study related projects, GitHub address, which contains the author of the Flutter study related to some of the articles, will be updated regularly, will also upload some learning demo, welcome attention.

5. Reference

1. Add flutter to existing apps
2. Upgrading flutter

Integrated flutter in existing projects