How to Walk the Flutter Path from Compose

Flutter is fast becoming one of the most popular multi-platform frameworks. Many mobile developers are gravitating towards it due to its wide support for mobile (iOS and Android), web, and desktop applications from a single code base. This not only reduces development time but also minimizes effort. Furthermore, Flutter applications are compiled directly to native machine code, leading to superior performance in comparison to other multi-platform frameworks like React Native. But how straightforward is the transition for someone with experience in Jetpack Compose?  

There are certain aspects of Flutter that might seem unusual or even unpleasant at first:

• Semicolons: Missed them? Don’t worry, they are back and stronger than ever. 

Seems like you are using Java or a slightly older language.

• Widgets Everywhere: For those accustomed to Jetpack Compose, it’s evident that Flutter’s Widgets demand a lot more boilerplate code. The nesting of widgets can result in an overwhelming cascade of braces and brackets. Additionally, in Flutter, everything is a widget—even properties like padding or center—which are mere properties in Compose.

• Const keyword: Flutter uses the 'const' keyword in constructors to optimize rebuild work. In contrast, Compose framework uses the composable parameters to determine if a composable can be skippable during composition. While Compose might appear cleaner, Flutter's approach is more explicit.

‍

However, it's not all bumps in the road. Flutter offers a speedy development cycle courtesy of hot reload, enabling developers to view UI changes in real-time as they code, thus accelerating development. On the other hand, Jetpack Compose has preview composables embedded in the Android Studio IDE  allowing the developer to see a preview, but lacks the hot reload capability for real or emulated devices.

Dart, the language behind Flutter, is null-safe, strongly typed, and highly expressive. Flutter's widgets provide a consistent UI toolkit, offering custom widgets for each platform. For instance, the AppBar in Flutter auto-adjusts its appearance based on the OS, centering the title for iOS and aligning it to the left for Android.

Similarities

Helpfully, certain similarities exist between Compose's composables and Flutter's widgets, such as:

• Scaffold: implements the basic material design visual layout structure.
• Column: Display items vertically.
• Row: Display times horizontally.
• Box (Compose)/ Container (Flutter): Overlays elements.

However, for the same functionality, Flutter generally demands more boilerplate, for example, let's compare list creation in both frameworks:

Versus creating a list in Flutter: 

State management

State management: This is the method of managing and updating the internal state of components or widgets.

In the case of Compose we have the remember function to store state in Composables:

In Flutter, StatefulWidget manages state:

As highlighted by the above examples, Flutter typically requires more code than Compose.

Regarding the architecture, Google recommends MVVM for Android. Flutter's architectural guidance is more varied, with options like Bloc, Riverpod, or GetX. You can check out this article delving deeper into this topic.

Conclusion

Declarative UI frameworks like Flutter and Jetpack Compose revolutionize the way developers create user interfaces by allowing them to describe the UI's structure and behavior. Both frameworks share the fundamental principle of describing the UI as a function of the state.

This shared principle means that transitioning from Jetpack Compose to Flutter involves a manageable learning curve. Often, Flutter requires more code to achieve the same outcomes as Compose. On the other hand, Flutter hot reload feature saves us time and enhances programming agility. The primary challenge in Flutter lies in mastering state management in a safe and efficient manner using popular choices like Bloc, Riverpod, or GetX. The upside? By the journey's end, you'll be skillful at developing applications for Android, iOS, web, and desktop by learning only one framework, enjoy the ride!

‍