An article to understand the communication between Android and Flutter

As a cross-platform solution, Flutter is often embedded as a module into native Android and iOS applications. Communication between Flutter and the native Android end is essential. So this article will describe how Android communicates with Flutter.

1. Architecture Overview

Messages are transmitted between native (host) and flutter (client) through platform channels, as shown in the following figure:

To ensure that the user interface can respond correctly, messages are delivered asynchronously, whether native sends messages to Flutter or Flutter sends messages to native.

In flutter, MethodChannel can send messages corresponding to method calls. On native platforms, MethodChannel on Android can receive method calls and return results. These classes can help us develop platform plugins with very little code.

Note: This section is from the flutter official website and readers can check it out on their own.

2. Platform channel data type support and codecs

Platform channels can encode and decode messages using provided codecs that support efficient binary serialization of simple JSON-like values ​​such as booleans, numbers, strings, byte buffers, and lists and maps of these. These values ​​are automatically serialized and deserialized when you send and receive them.

The following table shows how to receive Dart values ​​on the platform side and vice versa:

Regarding codecs, the Android side provides the following.

1. BinaryCodec: It is the simplest codec. Its return value type is the same as the input parameter type, both in binary format (ByteBuffer). Since BinaryCodec does nothing during the encoding and decoding process, it just returns the binary data intact. Therefore, the transmitted data is free from copying during encoding and decoding. This method is very useful when the amount of data transmitted is relatively large. For example, a picture is passed from the Android side to the Flutter side for display.
2. StandardMessageCodec: It is the default codec for BasicMessageChannel, supporting basic data types, lists, dictionaries, etc. When encoding, data is first written to the ByteArrayOutputStream stream, and then the data in the stream is written to the ByteBuffer. When decoding, data is read directly from the ByteBuffer.
3. StandardMethodCodec: is a wrapper based on StandardMessageCodec. It is the default codec for MethodChannel and EventChannel.
4. StringCodec: It is used for encoding and decoding between strings and binary data. Its encoding format is UTF-8. When encoding, it converts the string into a byte array, and then writes the array into the ByteBuffer. When decoding, it reads the data directly from the ByteBuffer.
5. JSONMessageCodec: internally calls StringCodec to implement encoding and decoding.
6. JSONMethodCodec: Encapsulation based on JSONMessageCodec. Can be used in MethodChannel and EventChannel.

ByteBuffer is a class in Nio, as the name implies - it is an area for storing bytes. It has two implementation classes - DirectByteBuffer and HeapByteBuffer. DirectByteBuffer directly opens up an area in the memory to store data, while HeapByteBuffer opens up an area in the JVM heap to store data. Therefore, if you want to communicate data between DirectByteBuffer and HeapByteBuffer, you need to copy it.

3. Communication method

We have discussed some basic knowledge about the communication between Android and Flutter. Now let’s get to the point and see how Android communicates with Flutter.

There are four ways to implement communication between Android and Flutter.

1. Since a string, route, is passed when the flutter page is initialized, we can use route to pass the data we want to pass. This method only supports one-way data transmission and the data type can only be a string, with no return value.
2. This is achieved through EventChannel, which only supports one-way data transmission and has no return value.
3. This is achieved through MethodChannel, which supports two-way data transmission and has return values.
4. This is achieved through BasicMessageChannel, which supports two-way data transmission and has return values.

Let’s take a look at how to use these methods.

3.1、Transfer value during initialization

The main purpose is to create a route for flutter page transmission. I think this method is a trick, but it can still be used to transmit data. It is very simple to use, the code is as follows.

Let's look at the Android code first.

 //The third parameter can be replaced with the string we want.
 FlutterView flutterView = Flutter.createView(this, getLifecycle(), "route" );

In flutter, we only need to use the following code to get the value.

 void main() => runApp(MyApp(
 initParams: window.defaultRouteName,
 ));
 class MyApp extends StatelessWidget {
 final String initParams; //This is the value passed previously——route
 MyApp({ Key   key , @required this.initParams}) : super( key : key );
 @override
 Widget build(BuildContext context) {...}
 }

In this way, Android can pass data to Flutter when initializing Flutter. Since runApp is only called once, this method can only pass data once and the data can only be a string.

• To use window related APIs, you need to import the package dart:ui

3.2 EventChannel

EventChannel is a one-way communication method for native to send data to Flutter. Flutter cannot return any data to native. It is mainly used for native to send mobile phone power changes, network connection changes, gyroscopes, sensors, etc. to Flutter. It is used as follows.

Let's look at the Android code first.

 public class EventChannelPlugin implements EventChannel.StreamHandler {
 private static final String TAG = EventChannelPlugin.class.getSimpleName();
 private EventChannel.EventSink eventSink;
 private Activity activity;
 static EventChannelPlugin registerWith(FlutterView flutterView) {
 EventChannelPlugin plugin = new EventChannelPlugin(flutterView);
 new EventChannel(flutterView, "EventChannelPlugin" ).setStreamHandler(plugin);
 return plugin;
 }
 private EventChannelPlugin(FlutterView flutterView) {
 this.activity = (Activity) flutterView.getContext();
 }
 void send(Object params) {
 if (eventSink != null ) {
 eventSink.success(params);
 }
 }
 void sendError(String str1, String str2, Object params) {
 if (eventSink != null ) {
 eventSink.error(str1, str2, params);
 }
 }
 void cancel() {
 if (eventSink != null ) {
 eventSink.endOfStream();
 }
 }
 //The first parameter is the value returned when flutter initializes EventChannel, only once
 @Override
 public void onListen(Object o, EventChannel.EventSink eventSink) {
 this.eventSink = eventSink;
 Log.i(TAG, "eventSink：" + eventSink);
 Log.i(TAG, "Object：" + o.toString());
 Toast.makeText(activity, "onListen——obj:" + o, Toast.LENGTH_SHORT).show();
 }
 @Override
 public void onCancel(Object o) {
 Log.i(TAG, "onCancel：" + o.toString());
 Toast.makeText(activity, "onCancel——obj:" + o, Toast.LENGTH_SHORT).show();
 this.eventSink = null ;
 }
 }

The author has made a simple encapsulation of the Android code, which is still easy to understand. Let's take a look at the flutter code implementation.

 class _MyHomePageState extends State<MyHomePage> {
 EventChannel _eventChannelPlugin = EventChannel( "EventChannelPlugin" );
 StreamSubscription _streamSubscription;
 @override
 void initState() {
 _streamSubscription = _eventChannelPlugin
 //[ "abc" , 123, "Hello" ] corresponds to the first parameter of the onListen method on the Android side, and no value is required
 .receiveBroadcastStream([ "abc" , 123, "Hello" ])
 .listen(_onToDart, onError: _onToDartError, onDone: _onDone);
 super.initState();
 }
 @override
 void dispose() {
 if (_streamSubscription != null ) {
 _streamSubscription.cancel();
 _streamSubscription = null ;
 }
 super.dispose();
 }
 //The native end sends normal data
 void _onToDart(message) {
 print(message);
 }
 //When native fails, the data sent
 void _onToDartError(error) {
 print(error);
 }
 //The method called when native completes sending data. It will be called every time the sending is completed.
 void _onDone() {
 print( "Message delivery completed" );
 }
 @override
 Widget build(BuildContext context) {...}
 }

The above is the code implementation for communication through EventChannel. Calling the send method of EventChannelPlugin can send data to Flutter.

3.3 MethodChannel

MethodChannel is a communication method for sending data between native and flutter. As the name implies, the corresponding methods in native and flutter can be called through MethodChannel, and this method has a return value. Its usage is as follows.

First, let’s look at the code implementation on the Android side.

 public class MethodChannelPlugin implements MethodChannel.MethodCallHandler {
 private Activity activity;
 private MethodChannel channel;
 public   static MethodChannelPlugin registerWith(FlutterView flutterView) {
 MethodChannel channel = new MethodChannel(flutterView, "MethodChannelPlugin" );
 MethodChannelPlugin methodChannelPlugin = new MethodChannelPlugin((Activity) flutterView.getContext(), channel);
 channel.setMethodCallHandler(methodChannelPlugin);
 return methodChannelPlugin;
 }
 private MethodChannelPlugin(Activity activity, MethodChannel channel) {
 this.activity = activity;
 this.channel = channel;
 }
 //Call the flutter method, no return value
 public void invokeMethod(String method, Object o) {
 channel.invokeMethod(method, o);
 }
 //Call the flutter method and get a return value
 public void invokeMethod(String method, Object o, MethodChannel.Result result) {
 channel.invokeMethod(method, o, result);
 }
 @Override
 public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
 switch (methodCall.method) {
 case   "send" ://The returned method name
 //Return value to flutter
 result.success( "MethodChannelPlugin received: " + methodCall.arguments);
 Toast.makeText(activity, methodCall.arguments + "" , Toast.LENGTH_SHORT).show();
 if (activity instanceof FlutterAppActivity) {
 ((FlutterAppActivity) activity).showContent(methodCall.arguments);
 }
 break;
 default :
 result.notImplemented();
 break;
 }
 }
 }

The author has made a simple encapsulation of the Android code, which is still easy to understand. Let's take a look at the flutter code implementation.

 class _MyHomePageState extends State<MyHomePage> {
 MethodChannel _methodChannel = MethodChannel( "MethodChannelPlugin" );
 @override
 void initState() {
 _methodChannel.setMethodCallHandler((handler) => Future<String>(() {
 print( "_methodChannel：${handler}" );
 //Monitor the method name and parameters sent by native
 switch (handler.method) {
 case   "send" :
 _send(handler.arguments); //handler.arguments represents the method parameters passed by native
 break;
 }
 }));
 super.initState();
 }
 //Flutter method called by native
 void _send(arg) {
 setState(() {
 _content = arg;
 });
 }
 String _resultContent = "" ;
 //Flutter calls the corresponding method of native
 void _sendToNative() {
 Future<String> future =
 _methodChannel.invokeMethod( "send" , _controller.text);
 future.then ((message) {
 setState(() {
 //message is the data returned by native
 _resultContent = "Return value:" + message;
 });
 });
 }
 @override
 Widget build(BuildContext context) {...}
 }

The above is the code implementation of communication through MethodChannel. It is relatively simple. To use it on the Android side, you only need to call the invokeMethod method of MethodChannelPlugin. To use it on the Flutter side, you only need to refer to the implementation of the _sendToNative method.

3.4 BasicMessageChannel

BasicMessageChannel is a communication method that can send messages between native and flutter. It supports the most data types and has the widest range of applications. The application scenarios of EventChannel and MethodChannel can be implemented using BasicMessageChannel, but the application scenarios of BasicMessageChannel may not be implemented using EventChannel and MethodChannel. This method has a return value. Its usage is as follows.

First, let’s look at the implementation of the Android code.

 //The supported data type here is String.
 public class BasicMessageChannelPlugin implements BasicMessageChannel.MessageHandler<String> {
 private Activity activity;
 private BasicMessageChannel<String> messageChannel;
 static BasicMessageChannelPlugin registerWith(FlutterView flutterView) {
 return new BasicMessageChannelPlugin(flutterView);
 }
 private BasicMessageChannelPlugin(FlutterView flutterView) {
 this.activity = (Activity) flutterView.getContext();
 this.messageChannel = new BasicMessageChannel<String>(flutterView, "BasicMessageChannelPlugin" , StringCodec.INSTANCE);
 messageChannel.setMessageHandler(this);
 }
 @Override
 public void onMessage(String s, BasicMessageChannel.Reply<String> reply) {
 reply.reply( "BasicMessageChannelPlugin received: " + s);
 if (activity instanceof FlutterAppActivity) {
 ((FlutterAppActivity) activity).showContent(s);
 }
 }
 void send(String str, BasicMessageChannel.Reply<String> reply) {
 messageChannel.send(str, reply);
 }
 }

The author has made a simple encapsulation of the Android code, which is still easy to understand. Let's take a look at the flutter code implementation.

 class _MyHomePageState extends State<MyHomePage> {
 //StringCodec() is the encoding format
 BasicMessageChannel<String> _basicMessageChannel =
 BasicMessageChannel( "BasicMessageChannelPlugin" , StringCodec());
 @override
 void initState() {
 _basicMessageChannel.setMessageHandler((message) => Future<String>(() {
 print(message);
 //message is the data passed by native
 setState(() {
 _content = message;
 });
 //Return value to Android side
 return   "Received Native message:" + message;
 }));
 _controller = TextEditingController();
 super.initState();
 }
 //Send a message to native
 void _sendToNative() {
 Future<String> future = _basicMessageChannel.send(_controller.text);
 future.then ((message) {
 _resultContent = "Return value:" + message;
 });
 }
 @override
 Widget build(BuildContext context) {...}
 }

The above is the code implementation for communication through BasicMessageChannel. On the Android side, you only need to call the send method of BasicMessageChannelPlugin to send data to Flutter. BasicMessageChannel.Reply is the callback method of the return value. On the Flutter side, you only need to refer to the implementation of the _sendToNative method.

4. Communication Principle

From the analysis of the source code of communication between Android and Flutter, the implementation is relatively simple. ByteBuffer is used as the data carrier, and then BinaryMessenger is used to send and receive data. The overall design is as follows.

As can be seen from the figure, the Android side and the Flutter side use the same design. As mentioned earlier, communication is asynchronous, so where is the thread switching? In fact, it is implemented at the bottom of the system. In the communication between Android and Flutter, the bottom of the system shields a large number of complex operations such as thread switching and data copying. This allows the Android side and the Flutter side to communicate conveniently.

On the Android side, BinaryMessenger is an interface that is implemented in FlutterView. In the BinaryMessenger method, JNI is used to communicate with the underlying system. On the Flutter side, BinaryMessenger is a class that communicates with the window class, and the window class actually communicates with the underlying system.

5. Summary

In the hybrid development mode of Android and Flutter, there will certainly be many scenarios where they need to communicate with each other. Understanding the various ways and uses of communication between Android and Flutter will help you choose a reasonable way to implement it.

at last

If you have read this far and think the article is well written, please give me a thumbs up. If you think there is something that needs to be improved, please leave me a message. I will definitely check it carefully and correct the deficiencies. Thank you.