My Experience with Flutter as a Native Android Developer

I have been writing native Android Apps for sometime. I decided to try flutter.

I am NOT here to start a war on which is the best or worst.

I decided that the best way to weigh on both platforms is to build something similar.

I took one of my open source project written in Kotlin (XML) and then built same thing with Dart (Flutter).

Finished app.

I know that a better comparison will be with Jetpack Compose, but this isn’t a comparison, I will only be making some reference of somethings I did with same project using Kotlin & XML

Subsequently, I may build my other jetpack compose projects with Flutter…Until then…:🧐

Github Repository:

Native Android(Kotlin + XML): https://github.com/ibrajix/NftApp

Flutter (Dart): https://github.com/ibrajix/NftAppFlutter

You can directly download APK on both repos.

I used similar approach with respect to Architecture and state management on both platforms.

You can check my other article on same project with Kotlin & XML here

Architecture & State Management

Flutter:
I used Bloc Pattern (Business Logic Component).

Android:
MVVM Architecture with StateFlow

As you can see, they are identical.

SplashScreen

Flutter:
I made use of Stack widget with AnimatedPositioned Children which helps to move the icon from bottom to the center of the screen.

Android:
Here, I made use of Lottie Animation — Download json and display.

WelcomeScreen

Flutter:
Made use of popular UI widgets here like Columns, and Container, pretty straightforward.

Android:
With constraintLayout, this was also easy.

HomeScreen

Flutter:
This is the interesting part and where I think Flutter shines. In the home screen we:
— Call A Bloc Event to Make a network request asynchronously (We make both request simultaneously with Future.wait → In repository)
— Repository gets the data from remote API and sends it back to the Bloc
— We emit (push) state changes to the BlocState based on the response from the api.
— The BlocConsumer and BlocBuilder listens to changes in the state and rebuilds the ui.

_featured, _topPicks and _trending are extracted UI widgets for displaying Featured item, Top Picks and Trending Items

Featured Image — Is a single image displayed directly in the widget from the network using NetworkImage(“ImageUrl”)

TopPicks and Trending Images — Are obtained through get request made to the remote api from the repository

Displaying List

TopPicks
To display a list of items which can be scrolled horizontally, I made use of plain ListView, (Because we have limited number of items, just 4) with scroll direction set to horizontal.

P.S I also used ListView.Builder for TrendingItems. (Keep reading)

TrendingImages
To display a list of items which can be scrolled vertically, I made use of ListViewBuilder here. (Also note that the entire home screen view can also be scrolled, not just the trendingImage portion)

And that’s basically it. Doing same thing on Android (XML) is WAR!.

I explained everything for native android (Kotlin & XML) in the tutorial I wrote here:

You’ll need: A recyclerView, adapter to achieve same thing.

Thanks for reading.

Final Thought:

I enjoyed building same project with Dart (Flutter) than with Kotlin (xml). Fullstop. :👋

CONTACT ME
https://linktr.ee/Ibrajix