How to Introduce Flutter in Legacy Native Apps
Flutter’s declarative and reactive UI, support for the application state, smooth animations and dual-platform availability are compelling reasons for the mobile developer to create production-ready apps in Flutter.
But as developers, we don’t get a chance to create a new app every day. Developer life is not always exploratory. More often, we as developers must enhance, maintain, add new features in the legacy apps built on Android and iOS. This leaves developers with not much of an opportunity to work on exciting new frameworks like Flutter.
Maybe you have the question, can I use Flutter in the existing native app?
The answer is Yes.
Creating a brand new native app using Flutter is quite straightforward, we have plenty of examples already. We will explore in the rest of the post, how to leverage Flutter based UI in the existing native apps.
Note: These features are experimental, expected to undergo evolutionary changes, the concepts you are learning may not change.
Integration
How do we integrate a flutter screen into an existing app (host)?
Before we start about the integration, we need to think about the best way to export the flutter screen into the native apps.
Visualize your flutter screens as components.
What is a Component?
Components are pieces of functionality that can be independently replaceable and upgradeable.
Flutter UI with the virtue of the fact can be used in both Android and iOS, it qualifies to be developed as an independent piece — component.
Once the Flutter component is created, how do they will be available to the legacy native apps?
There are two options
A) Export the flutter component as aar or as a pod dependency
B) Depend upon the flutter source code available as a dependency
Obviously, except for some quick demo projects, we should choose option A.
How do we export a flutter component in Android?
How do we export a flutter component in iOS?
As a CocoaPods dependency
And runpod install in the terminal.
Transfer of data between Native (Host) app and flutter components
Now we understood how the integration of the flutter component works, you may have a question, how do I transfer the data from my legacy native app to the flutter component, vice versa?
Using Method Channel
What is Method Channel?
Method Channel is the medium that enables the data transfer between the host (platform) to the flutter component.
On the Android side MethodChannel Android (API) and on the iOS side FlutterMessageChannel (API) is used for receiving method calls and sending back results.
You should declare the method channel with an identifier in the Flutter component and initialize the method channel as below
How does the handle method look like?
You can decode the call.agruments to retrieve the JSON data if any. If your flutter class is stateful, you can set the state, if needed.
Data transfer in reverse direction?
Method calls can also be sent in the reverse direction, with the flutter component as the source and the host as the destination.
In the flutter component, call the invokeMethod with the method name and the message need to be passed.
In the Android / iOS Component, capture the message using the channel.setMethodHandler
Now we have learned so far, how we can invoke the flutter components from the native app and pass data between the native app to the flutter component. We also learned how to pass data back from the flutter component to the native app.
In the next post, we will take an existing android app and embed a flutter component.