👨🏼‍💻Flutter vs Jetpack Compose (Comparison Learning Series Part -1)

Flutter & Jetpack Compose

In this learning series, we will learn flutter and jetpack compose through a comparison way. Our aim is to teach flutter developers how to write jetpack compose as well as native android developers who use jetpack compose how to write flutter by comparing two technologies.

Note: As a Flutter developer, I will make the definitions according to Flutter.

Introduction

In the first article of our series, we will learn about 4 of the basic widgets/components.

The widgets/components we will review are:

1. Scaffold
2. Column
3. Row
4. Container/Box

Widgets(Flutter)/Components(Jetpack Compose)

1.Scaffold

Scaffold is a layout that implements the basic material design visual layout structure. It contains sections such as appBar, body, bottomNavigationBar, drawer, FAB.

The scaffold parameter names can vary in Flutter and Jetpack Compose. You can see the important scaffold parameters for comparison below:

Scaffold

Usage of Scaffold State:

It is used in Flutter like this:

In Jetpack compose, it is defined as:

Let’s keep the drawer state as an example.

If we give an example of the usage of scaffold:

Flutter:

Jetpack Compose:

2.Column

The column lets you display items vertically.

Note: You cannot scroll with Colum. You may consider using Listview for scrolling.

Column

2.1 Flutter alignments:

Flutter Alignments

As seen above, “Main Axis” aligns column elements vertically and “Cross Axis” provides horizontal alignment of elements.

Let’s see the horizontal and vertical alignment types together:

Main Axis Alignments:

MainAxisAlignment alignments

Let’s explain the alignment types we see in the image above, one by one:

Note: The elements added to the column are in order: 1. Green, 2. Blue, 3. Orange

Note2: By default, the first inserted element is at the top point, and the last added element is at the bottom point.

center: It does not leave space between column elements. A central adjustment is made so that there is equal space at the top and bottom.

start: It does not leave space between column elements. It sorts the elements from top to bottom.

end: It does not leave space between column elements. It places each new element added at the lowest point of the group.

spaceEvenly: It adjusts equal spacing on top side, bottom side and between elements.

spaceAround: It is almost identical to spaceEvenly. The only difference: In spaceAround, the spaces at the top and bottom are less, and the spaces between the elements are more.

spaceBetween: It leaves no gap at the top or bottom. It just leaves an equal amount of space between the elements.

Cross Axis Alignments:

CrossAxisAlignment Alignments

center: Place the children so that their centers align with the middle of the cross axis.

start: Place the children with their start edge aligned to the left side.

end: Place the children as close to the right side as possible.

stretch: Set the elements to fill the entire space horizontally.

2.2 Jetpack Compose Alignments:

Vertical Arrangement:

We will compare with Flutter here.

Top: MainAxisAlignment.start

Bottom: MainAxisAlignment.end

Center: MainAxisAlignment.center

SpaceEvenly: MainAxisAlignment.spaceEvenly

SpaceBetween: MainAxisAlignment.spaceBetween

SpaceAround: MainAxisAlignment.spaceAround

Now let’s see it in the table for better understanding:

MainAxis vs Arrangement

Horizontal Alignment :

We will compare with Flutter here.

Start: CrossAxisAlignment.start

CenterHorizontally: CrossAxisAlignment.center

End: CrossAxisAlignment.end

Now let’s see it in the table for better understanding:

CrossAxis vs Alignment

3.Row

Row allows you to display items horizontally.

Note: You cannot scroll with Row. You may consider using Listview for scrolling.

Row

3.1 Flutter Alignments

Flutter Alignment

As seen above, “Main Axis” allows row elements to be aligned horizontally, and “Cross Axis” allows elements to be aligned vertically.

Let’s see the horizontal and vertical alignment types together:

Main Axis Alignments:

CrossAxisAlignment alignments

Let’s explain the alignment types we see in the image above, one by one:

Note: The elements added to the Row are in order: 1. Green, 2. Blue, 3. Orange

Note2: By default, the first added element is at the leftmost point, and the last added element is at the rightmost point.

center: It does not leave space between row elements. A central adjustment is made so that there is equal space at the left and right.

start: It does not leave space between row elements. It sorts the elements from left to right.

end: It does not leave space between row elements. It places each new element added at the rightest point of the group.

spaceEvenly: It adjusts equal spacing on left side, right side and between elements.

spaceAround: It is almost identical to spaceEvenly. The only difference: In spaceAround, the spaces at the right and left are less, and the spaces between the elements are more.

spaceBetween: It leaves no gap at the right or left. It just leaves an equal amount of space between the elements.

Cross Axis Alignments:

CrossAxisAlignment alignments

center: Place the children so that their centers align with the middle of the cross axis.

start: Place the children with their start edge aligned to the top side.

end: Place the children as close to the bottom side as possible.

stretch: Set the elements to fill the entire space vertically.

3.2 Jetpack Compose Alignments:

Horizontal Arrangement :

We will compare with Flutter here.

Start: MainAxisAlignment.start

End: MainAxisAlignment.end

Center: MainAxisAlignment.center

SpaceEvenly: MainAxisAlignment.spaceEvenly

SpaceBetween: MainAxisAlignment.spaceBetween

SpaceAround: MainAxisAlignment.spaceAround

Now let’s see it in the table for better understanding:

MainAxis vs Arrangement

Vertical Alignment :

We will compare with Flutter here.

Top: CrossAxisAlignment.start

CenterVertically: CrossAxisAlignment.center

Bottom: CrossAxisAlignment.end

Now let’s see it in the table for better understanding:

CrossAxis vs Alignment

4.Container(Flutter) — Box(Jetpack Compose)

Container has too many parameters whereas Box has only 4 parameters but with the modifier parameter of Box, we can do all the work that Container does.

Let’s look at the parameters that the Container and Box take:

Flutter Container

Compose Box

You can see the comparison of the Container and Box parameters in the table below:

Note: Modifier and propagateMinConstraints parameters do not have exact equivalents in the container.

Now let’s explain the parameters of Container and compare it with Box:

margin: It is the space left outside the container. In Box, margin is given as follows:

Modifier.padding(100.dp).height(300.dp).width(300.dp)

The padding value for the margin must be given before the height and width.

In the container, the margin is given as follows:

Container(margin: const EdgeInsets.all(10),)

padding: It is the space left inside the container. In Box, padding is given as:

Modifier.height(300.dp).width(300.dp).padding(10.dp)

The padding value must be given after the height and width.

In the container, the padding is given as follows:

Container(padding: const EdgeInsets.all(10),)

alignment: It Specifies where to align the child in the container. Here’s how it’s done in Box:

Box(contentAlignment = Alignment.BottomCenter)

Alignment types for Container:

Container Alignment

Alignment types for Box:

Box Alignment

color: The background color is given in the Box as follows:

Box(modifier = Modifier.background(Color.Yellow))

width &height: We size the Box as follows:

Box(modifier = Modifier.height(300.dp).width(300.dp))

or

Box(modifier = Modifier.size(width = 300.dp,height = 300.dp))

decoration: This parameter of the container appears as an object.

Usually the BoxDecoration class is used. It contains various parameters. These parameters are:

BoxDecoration

Note: If we use BoxDecoration, we cannot give the color parameter to the Container. Color is used in BoxDecoration.

We will demonstrate the use of BoxDecoration’s border, borderRadius and shape parameters here.

Container:

Box:

borderRadius: It allows trimming from corners. In Box, this appears in a different way:

1. clip: This part allows to crop the Box. If we add border then clip will not be enough.
2. border: If we want to crop the border in the same way, we need to use Modifier.border(…).

Now let’s create the following image using Container and Box:

Box Example

Flutter Code:

Jetpack Compose Code:

Conclusion:

In the first article of this series, we started from the basic level by comparing widget/component. In the second series of the article, we will see different types of widgets / components.

As our series progresses, we will make more detailed comparisons.

I wish everyone a pleasant Flutter week :)

References:

Layouts in Flutter

widgets library — Dart API

Overview — Jetpack Compose Playground

https://developer.android.com/jetpack/compose