Introduction

Why Flutter?

Flutter is an open-source UI (User Interface) software development framework (toolkit) created by Google. It is used for building natively compiled applications for mobile, web, and desktop from a single codebase. Flutter enables developers to create visually appealing and high-performance applications with a consistent and responsive user interface across different platforms.

Just by learning one programming language called Dart, Developers are able to implement Flutter to create applications and deploy those applications to any platform including iOS, Android, Web, MacOS, Windows, Linux and even IOT (Internet of Things). This is possible because Flutter is a cross-platform framework. Flutter will continue to grow as Google puts more effort into development of the framework. In fact, Google actually rewrote their whole codebase for 'Google Pay' in Flutter.

Examples of Flutter Applications:

• Wonderous: https://flutter.gskinner.com/wonderous/

• I/O Photo Booth: https://photobooth.flutter.dev/#/

• Flokk: https://www.flokk.com/global

• Flutter Plasma: https://flutterplasma.dev/

• Google I/O Pinball: https://pinball.flutter.dev/

How Flutter Works

Languages such as Swift or Java are native frameworks that directly talk to the OS to do things. However, Flutter will not talk to the OS ever. Instead, Flutter talks to an engine made by C/C++ which will actually render the UI.

We can think of Flutter as a shell where the application and the framework is the pearl inside the shell, while the shell around the pearl is the engine. The sea around the shell would be the host platform (ex. Windows, iOS). The host will run the engine, the engine will run the Dart and Flutter code, and in turn render the UI.

Since Flutter does not use native widgets, the framework provides widgets that look just like Windows and iOS. In turn, we have more control to custom build our UI.

In turn, without relying on the host platform, Flutter will put an engine in the application, compile the Dart code. When the user opens the application, they are opening a runner project that will start the engine which, in turn, will run the code and render the UI. Depending on the platform, the application uses an embedder for cross-platform functionality.

Fun Fact: This process is similar with game engines such as Unity and Unreal Engine.

Flutter vs. React Native

Both Flutter and React Native allow you to create mobile app user interfaces, but they have different approaches and characteristics when it comes to UI development.

Flutter:

1. Customization: Flutter offers a wide range of highly customizable UI components called "widgets." These widgets can be combined and styled to create complex and beautiful UIs. The flexibility of Flutter's widgets allows you to achieve pixel-perfect designs.

2. Consistency: Flutter provides a consistent UI experience across different platforms (iOS and Android) because it doesn't rely on native components. Instead, it uses its own rendering engine to create a unified look and feel.

3. Hot Reload: Flutter's hot reload feature is especially beneficial for UI development. It allows you to instantly see the changes you make to your UI code without losing the app's state. This rapid feedback loop speeds up the UI design and development process.

4. Design Language: Flutter encourages the use of its own design language called "Material Design" for Android apps and "Cupertino" for iOS apps. These design languages provide guidelines and pre-designed components that contribute to a consistent and visually appealing UI.

React Native:

1. Native Components: React Native relies on native components provided by the platform (iOS and Android) to render UI. While this can give a more authentic native feel, it might also result in platform-specific design differences.

2. Styling: React Native provides a set of basic components that resemble native UI elements. Styling is achieved using a subset of CSS called "Flexbox," making it familiar to web developers. However, complex styling might require additional effort.

3. Third-Party Libraries: React Native has a large community and ecosystem, resulting in a wide variety of third-party UI component libraries available. This can speed up UI development by providing pre-built components.

4. Hot Reload: React Native also offers a hot reload feature, allowing developers to see UI changes quickly. However, some developers find Flutter's hot reload to be more seamless.

5. Platform-Specific Differences: While React Native aims to provide a native-like experience, you might need to write platform-specific code for certain UI components to achieve a truly native look and behavior.

In summary, both Flutter and React Native provide tools for creating mobile app UIs, but they differ in terms of customization, consistency, and how they handle native components. Flutter offers a more consistent UI across platforms and allows for deep customization, while React Native provides a more native feel but might require more attention to platform-specific differences.