Flutter is a framework from Google based on a programming language that Google created called Dart. Flutter is known for its performant UI and hot-reload feature, making it a popular choice among developers. Flutter's key strength was that it was cross platform. It meant it could run on both Android as well as iOS.
Android compose on other hand is just a new library for traditional Android development which allows you to declare your UI using declarative syntax which will certainly remind you for Flutter UI.
Problems solved by Flutter
Flutter was create for solving the problem of building cross-platform applications with a performant UI. Its hot-reload feature allows developers to quickly iterate and see changes in real-time. Additionally, Flutter's use of the Dart programming language provides a familiar and efficient development experience. Dart is a modern programming language which overcomes many problems faced by Java and Javascript programmers.
Check this example flutter code.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Column Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20), // Add spacing between elements
ElevatedButton(
onPressed: null, // Replace with button functionality
child: Text('Click me'),
),
],
),
),
),
);
}
}
Problems solved by Compose
Compose is not a language. It is just a library. In traditional Android development, it was easiest to write UI using XML. Then your code would "inflate" this XML into UI. The problem with this approach was that reading code did not make sense. When you looked at a particular XML file, it did not give you the big picture view of the UI. The java code on other hand did not give you slightest idea of the UI as it was decoupled from the XML.
Compose makes this simpler. You can actually look at the code and understand what it is actually doing and how it is supposed to look. Take an example:
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
@Composable
fun SimpleComposable() {
Column { // Arrange elements vertically
Text(text = "Hello, Compose!") // Display a text
Button(onClick = { /* Handle button click */ }) {
Text(text = "Click me") // Button text
}
}
}
@Preview(showBackground = true) // Render a preview in Android Studio
@Composable
fun SimpleComposablePreview() {
SimpleComposable()
}
Same code in traditional Android development would look like below in XML layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:id="@+id/text_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello, Android!"
android:textSize="24sp" />
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Click me" />
</LinearLayout>
Note that the XML file is far too bloated to make sense of and we have not even see the Java code that powers it yet.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}
Looking at this Kotlin code you do not understand what exactly it is displaying. To understand what is happening you need to look at two files and realize how they are linked. In real world applications there would be dozens of XML layout files that get used inside the activity to give it a particular appearance.
Flutter development environment
Flutter development environment is completely different from your standard java based development. You need the Android SDK and all that but you have the freedom to use wide variety of tools including VS Code. You need Dart and Flutter installed on your machine.
One advantage of Flutter is hot reload. Whether you are using simulator or real device any code changes immediately reflect in the app, almost like browser refresh when you are developing a webpage. This speeds up your development time.
Android compose development environment
With compose you should ideally use Android studio. Also, hot reload while Google claims is possible, remain extremely buggy feature. Google has tried a lot to make Android studio better experience but remains far from what developers would love using. Certainly not as good as iOS development in Xcode.
Speed of development
I have written dozens of apps in both and I would say Flutter is certainly great when it comes to writing cross platform apps. It is faster to develop than the traditional android development provided you have learned Dart pretty well.
Android Compose has been pretty good too and more importantly your app will have smaller footprint than usual.
App performance
Between Flutter and java based android apps, java based Android apps win by a good margin. Flutter apps take longer to install, longer to startup and are more prone to crashes and ANRs. But this performance penalty is often due to the fact that Flutter engine has to bootstrap. However, once it is fully bootstrapped and running, the complexity of your app does not really decrease the performance.
Compose based apps on other hand are very snappy when it comes to install and startup. However the performance of the app will degrade if you write without attention to the performance and best practices.
Flutter has a concept of "tree shaking" which means it can detect which parts of the code are not getting used and get rid of them. Android has similar concept in the form of proguard but I have seen that Flutter is lot better at this. However, because each flutter app must include the flutter engine with it, the total size of the app will always be much greater for Flutter apps.
Conclusion
There is no real good reason to write your apps in Flutter unless you want to build cross platform apps. In that case Flutter has clear advantage. However, Android Compose is an excellent library that brings the Flutter like paradigm to build UI and makes writing UI as good as Flutter.
