DEV Community

loading...

Flutter approach in micro-frontend

netfirms profile image Taweechai Maklay ・3 min read

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.

Alt Text

Alt Text

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.

Alt Text

Knowledge which we are using

  • Simple Android app development (View, Layout, Activity).
  • Flutter Platform-Channel.
  • Flutter widget development.

micro frontend term

Alt Text

Native-Flutter Hybrid frontend approach as an example application.

Alt Text

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

Discussion (6)

pic
Editor guide
Collapse
hrushiz profile image
Hrushikesh Zadgaonkar

Hi Taweechai,

Thank you for the great article.

I am a beginner in Flutter and looking for a code solution on how you achieved the micro frontend using Flutter. Can you share some code samples for this?

Regards,
Hrushikesh

Collapse
netfirms profile image
Taweechai Maklay Author

Hi
Google just officially announced add-to-app feature, I recommend you to use that way instead.
flutter.dev/docs/development/add-t...

Collapse
hrushiz profile image
Hrushikesh Zadgaonkar

Thanks!

Using this approach, we can add small flutter modules in the existing app. I am not sure how this can satisfy the micro-front end principle concept which says to have different release cycles and deploy any module anytime. What are your thoughts? Is this Google implementation really a micro-front end concept?

Collapse
feel2174 profile image
Young Joo Kim • Edited

Hi Taweechai,

I just tried to implement Android activity in flutter.

but, it still doesn't work.

By any chance, Do U have any sample code or github source??

I really want to develop my App like your screenshot(GIF file).

If you have sample code,

or

could you let me know your github?

please reply this article.

Collapse
netfirms profile image
Taweechai Maklay Author

Hi
Google just officially announced add-to-app feature, I recommend you to use that way instead.
flutter.dev/docs/development/add-t...

Collapse
fultonbrowne profile image
Fulton Browne

Great article!