Flutter approach in micro-frontend

I’ve started Flutter development just a few months ago. Working as a technical lead I have to find possibility and feasibility in new technology for business solutions. I’ve to start discovery Flutter with a build from scratch app, everything fine, I can develop the same app which took 2–3 weeks within 1 week with just basic Flutter knowledge, by the way, it has pros and cons. But this article is not about that. We will talk about “Can Flutter be a micro frontend for a mobile application?” Since simple knowledge about Flutter for me is Rendering Engine with Dart … So I try to find are we able to integrate Flutter widget to native or not? Do search and find the “Add-to-app” topic, it still under preview. Fine, so I discovered it and try it. First time so painful… after a few nights with it. I can get shape. I can display widget in the same native screen, open a new full fresh flutter page within the native application. So let’s see in architecture and tech perspective. Below is an example of the Android native-flutter application as below.

For example app, I’ve developed a native app that has embedded 2 Flutter widget, 1 Flutter activity and 1 native map view in it. Let’s get into the detail of each widget Weather forecast widget, this Flutter widget which I borrowed from albertopeam/flutter-weather project, it can display forecast weather and consume forecast data from open weather API. All the things packed into itself code no widget code involved in the native package except UI injection code. Flutter image carousel. This one is the simple one which displays just 3 pictures and if we click on the picture it will send message to Native to move native map location. Native map view, it just native map view. Flutter slider image Activity. This one is a separate native screen that just renders Flutter page widget.

Knowledge which we are using - Simple Android app development (View, Layout, Activity). - Flutter Platform-Channel. - Flutter widget development.

micro frontend term

Native-Flutter Hybrid frontend approach as an example application.

From my example, you can see we can add more and more possibilities for a native app with the power of Native-Flutter in the form of micro frontend term.

Conclusion I think flutter can be one of a solution if you have a growing team that has a broad of people in frontend development technology. Flutter is Flutter it design mindset, Dart is just provided structure for it to make Flutter alive. There is should no war between Native vs Flutter or Native vs Native-Flutter. Be pragmatics, in a positive way of using a micro frontend approach with Native-Flutter it can give you control at Native level (security, performance, and native service usage), easy to onboard another frontend tech in two teams, shorter time for uncertainly feature development and many more. Hope this article can give you some idea. Any thoughts and comments are welcome. Peace