How Flutter access existing Android project?

background

Currently a hot flutter, I believe that many small partners are eager. But the status quo is that many companies have a stable Android / ios project, with a flutter want to completely rewrite completely unrealistic, after all, the world is not so much "free fish."

So we need to think about is how to access the flutter among the native project.
Here the main reference or official document portal .

Performing the following main steps:

1. Run in your Android project directory at the same level directory

Assume the root directory of your project's / xxx / pro, you need to lower / xxx (under a home directory can also be follow-up will be referred to) execute the following command

flutter create -t module flutter_module

2. Open the file setting.gradle your Android project

Add from setBinding place, there is one thing to take note,

• The first step flutter_module assume that you created under your project, you configure the path when you need to add the item name
  FlutterHybrid / flutter_module / .android / include_flutter.groovy
• The first step flutter_module suppose you create with your project is the same level, the configuration path when you do not need to add the item name
  flutter_module / .android / include_flutter.groovy

include ':app'

setBinding(new Binding([gradle: this]))
println("settingsDir.parentFile=" + settingsDir.parentFile)
evaluate(new File(settingsDir.parentFile, 'FlutterHybrid/flutter_module/.android/include_flutter.groovy'))

3. Finally open build.gradle under your app directory

implementation project(':flutter')

Use gestures

Preparatory work has been completed, the next step is to pull up a flutter of pages.
Official provides a way for both native module pull flutter module:

1. Direct createView create a flutterView, add him to your layout
   
   

   createView way
   
   Finally, a "/ setting" corresponding routing flutter point to pages on the route temporarily put it here, follow-up will be mentioned.
2. Use fragment way
   
   

   fragment way
   
   These are the two elements module application module flutter way, in fact, seen FlutterFragment source you will find that he is called Flutter.createViewto return a FlutterView, we are ultimately added to a flutterView native in it.

flutter call native capacity

The main reference documentation portal

MethodChannel

MethodChannel(flutterView, FLUTTER_CHANNEL_NAME).setMethodCallHandler { call, result ->
            if (call.method == "add") {
                Log.d("111", "enter test")
                try {
                    val a = call.argument<Int>("a")
                    val b = call.argument<Int>("b")
                    Log.d("111", "a=$a , b=$b")

                    val res = doRealAdd(a, b)
                    result.success(res)
                } catch (e: ClassCastException) {
                    e.printStackTrace()
                }
            } else {
                result.notImplemented()
            }
        }

These are native to realize part, then, how to flutter over there to call it?

Future<void> requestAdd() async {
        try {
            final int result = await platform.invokeMethod(MNAME_TEST,
                <String, dynamic>{
                     'a': 20,
                     'b': 30,
                   });
            debugPrint('result add = $result .');
        } on PlatformException catch (e) {
            debugPrint("Failed to get battery level: '${e.message}'.");
        }

    }

The above sample code involves how to flutter which function to call native, passing what parameters and what you can get return value. Of course, the supported data types is limited.

Supported data formats

We want to define the type of data sent from the past how to do?
Obviously, we need to convert the type of dart supported, perhaps, you might think Object-> Json, then, to flutter over there, in Json objects can be changed.
But there are other ways, for example, you just use the protobuf, then direct transfer byte [] certainly see anyway. Furthermore, you can also implement custom protocols, if there is enough time to say. In short type of data transfer is required between platforms can be identified.

Native send data to flutter

References the EventChannel
Native end code is as follows:

native side code

flutter end code is as follows:

flutter side code

to sum up

Native to do pull flutter flutter of pages and calls native modules as well as the native module to push data to flutter proven are ok, so flutter existing app access road is feasible.
The sample code above have been uploaded to github poke me poke me
if this article rewarding for you, please help thumbs up and share, thank you.