Flutter UI vs Jetpack Compose UI vs Swift UI

Folks, Today we will be comparing codes for flutter UI with Jetpack compose UI (which is used for native android application development) and Swift UI (which is used for native iOS application development).

Currently, Jetpack compose and swift UI has some limitations with min version supported and community support as both are emerging frameworks right now. But if you check with the existing UI development system, then you will definitely find these new UI frameworks easy, fast, and interesting to use.

Android – In the existing environment, Android uses xml format to define their UI’s. UI layouts have been evolved in the past right from LinearLayout, Absolute Layout, Relative Layout to Constraint Layout. Where each and every layout has there separate use cases. These UI’s are separated by business logic. So Jetpack came with data binding, to tightly couple data and UI with each other.

iOS If you also check with iOS again it’s a similar case with the existing UI system. i.e Storyboard. Using Storyboard with a large set of screens was a painful and tedious task to handle.

Now, in Android as well as iOS, these problems have been solved by introducing Jetpack Compose and Swift UI. When I went through both of them, I can say that they have been strongly influenced by reactive programming style. Also If you check the way flutter UI’s have been developed you will find 85% similarity with the style of building UI’s with compose and swift UI. The best part is that you can build UI with all of the three technologies in your programming class files itselft.

We will see the following small card UI building example in all of these to see how similar they look.

Flutter UI Code

class MyCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(children: [
      CircleAvatar(
        backgroundImage: AssetImage('assets/sundar_pichai.jpeg'),
        radius: 30,
      ),
      SizedBox(
        width: 10,
      ),
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            "Sundar Pichai",
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          Text(
            "Chief Executive Officer of Alphabet",
            style: TextStyle(
              fontSize: 16,
            ),
          ),
        ],
      )
    ]);
  }
}

Jetpack compose UI code

@Composable
fun MyCard() {
        Row(modifier = Modifier.fillMaxWidth().height(60.dp)) {
            Image(painter = painterResource(
                id = R.mipmap.sundar_pichai),
                contentDescription = null,
                modifier = Modifier
                    .size(60.dp)
                    .clip(CircleShape)
                    .border(2.dp, Color.Gray, CircleShape)
            )
            Column(Modifier.fillMaxHeight().padding(horizontal = 10.dp),
                verticalArrangement = Arrangement.Center
            ) {
                Text(
                    text = "Sundar Pichai"
                )
                Text(
                    text = "Chief Executive Officer of Alphabet"
                )
            }
        }
}

Swift UI code

struct ContentView: View {
    var body: some View {
        HStack (
            spacing: 10
        ){
            Image("sundar_pichai_img").resizable().frame(width: 60, height: 60
            ).clipShape(Circle()).overlay(Circle().stroke(Color.gray, lineWidth: 2
            ))
            VStack(
                alignment: .leading,
                spacing:0
            ){
                Text("Sundar Pichai").font(.title2)
                Text("Chief Executive Officer of Alphabet").font(.body).foregroundColor(.gray)
                
            }
        }
    }
}

*thanks to Amit Rawal for swift related code

For comparison purpose I’m also adding following image with all the examples at one place

Beginners can quickly start with Flutter as it’s more stable now and also its multiplatform environment. And then as per requirement you can move on native platforms. As you are already familiar with Flutter UI, you will find it very easy to implement. 

Here are some references where you can find helpt to start with all of these techs.

Flutter – https://flutter.dev/docs/development/ui/layout/tutorial

Jetpack Compose – https://developer.android.com/jetpack/compose/tutorial

Swift UI – https://developer.apple.com/tutorials/swiftui

Also, If you are keener to try out flutter widgets then search for Flutter – widget of the week on youtube. It is an official channel from flutter.dev and has very good, small length and interesting videos of flutter widgets.

On social media, many times I read questions like – Will Flutter kill Java or Kotlin development? Though UI can not be the only reason to evaluate this, By looking at this, I still think that It would never happen.

The purpose of sharing this article is to show that how mobile development is adopting a reactive programming style. So if you learn one of them, you will easily be able to program in others. I would recommend beginners to start with flutter first before moving to Jetpack compose and swift UI.

That’s all for today. Thanks for reading 🙂

One thought on “Flutter UI vs Jetpack Compose UI vs Swift UI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.