Flutter vs Jetpack Compose

Introduction :

In the past few years, Flutter has raised among the development community as a solid and lovable framework to build mobile apps. Recently, Android has announced the release of an alpha Jetpack library called Compose. There are noticeable similarities between the new library and Flutter. As a native apps developer who loves Flutter, I thought I would do a small comparison between Jetpack and Flutter. Keeping in mind that Compose is still in Alpha and it is expected to change (for better I hope).

To compare them, I decided to build a simple app on both platforms and put the apps, and the source code side by side to do a fair comparison.

Building a simple app

The App I am building in this article has a simple interface with a column of UI elements with a small counter button to demonstrate a simple stateful activity.

The UI components (widgets) tree is shown below with some components nesting and interaction between a parent component and his child.

Flutter:

So let’s start with Flutter. The body of our main function would look like this (You can find the full code in my GitHub ):

Jetpack Compose:

On the other hand, this is how I ended up in Jetpack Compose:

Both apps side by side:

As you can see there are similarities in component names and the way the code is written so I put down the results in the following table:

There is a move towards declarative UI in the mobile applications community that Flutter has adapted since the beginning.

What is Declarative UI?

To understand what declarative UI is, let’s first explain how Android developers currently build UIs. Android UI development is called Imperative style where you define your UI components in an XML file and using functions like findViewById you retrieve an instance of that object and with setters and getters, you can perform changes to your UI. On the other side, declarative styles are lightweight descriptions of the UI or “Blueprints” that are then used to build your UI components.

The move towards declarative UI’s by Android and IOS (SwiftUI) is noticeable. So let’s compare both styles. First, let’s look at the imperative style which is currently used in Native Android.

Imperative Style :

As you can see that UI is first defined in an XML file and we have to create an instance in the java or Kotlin files and change in the UI using setters and getters. On the other side in Flutter and declarative style you can notice that the UI and logic are written in one type of file.

Declarative Style:

In declarative, you describe how the UI should look like to the framework and how to build and render as described by you.

Resources:

You can find the full source codes in the below repositories: