Flutter: What is It?

What is Flutter?

Flutter is an open-source user interface development framework created by Google, released in its first stable version in December 2018. It enables building applications for iOS, Android, web, and desktop (Windows, macOS, Linux) from a single codebase written in Dart, a language also developed by Google. Flutter's major distinguishing feature is its custom rendering engine based on Skia (and more recently Impeller), which draws every pixel of the interface rather than using the platform's native components.

This approach gives developers total control over the application's appearance, guaranteeing identical rendering across all platforms. Flutter quickly gained popularity thanks to its high performance, composable widget system, and instant hot reload that dramatically accelerates the development cycle.

Why Flutter Matters

Flutter has transformed the cross-platform development landscape by proposing a radically different approach from its competitors. Its growing popularity makes it an essential framework that technical decision-makers need to understand.

• Pixel-perfect rendering: The custom graphics engine guarantees the application looks exactly the same on all platforms, eliminating visual inconsistencies between iOS and Android.
• High performance: Flutter compiles to native ARM code, achieving 60 to 120 fps performance comparable to native applications.
• Extended multi-platform: Beyond mobile, Flutter also targets web and desktop, potentially covering all platforms with a single team.
• Ultra-fast Hot Reload: Code changes are visible in under a second, without losing the application state. This transforms the development experience.
• Composable widgets: Flutter's widget system is extremely flexible. Every interface element is a widget, allowing infinite composition and customisation.
• Google's backing: Flutter is used by Google in its own products (Google Pay, Google Ads) and benefits from significant R&D investment.

How It Works

Flutter uses a layered architecture. At the lowest level, the Flutter engine (written in C++) handles graphics rendering, input management, and Dart runtime execution. Above that, the Flutter framework (written in Dart) provides widgets, animations, and layout APIs. Developers primarily interact with the framework layer.

Dart code is compiled to native ARM or x64 machine code for mobile and desktop platforms (AOT - Ahead of Time compilation), and to optimised JavaScript for the web. During development, JIT (Just in Time) compilation enables hot reload. The rendering engine draws the interface directly on an OpenGL or Metal canvas, without going through the platform's native widgets.

At KERN-IT, we acknowledge Flutter's technical qualities, particularly its performant rendering and visual consistency. However, for our cross-platform projects, we favour React Native because it integrates naturally with our existing React stack and allows our web developers to contribute to mobile code without switching languages. Flutter remains an excellent choice for teams starting a mobile project without a pre-existing React ecosystem.

Concrete Example

Consider a Belgian fintech wanting to launch a personal finance management app with a highly customised design: complex animations, interactive charts, and an interface that visually stands out from standard applications. The company wants to target iOS, Android, and the web with an identical interface on each platform.

With Flutter, the development team creates custom widgets for financial charts, implements smooth animations for view transitions, and produces a visually identical application across all three platforms. Flutter's rendering engine enables visual effects that would be complex to reproduce with native components. The application is delivered in 4 months with a team of 4 Dart developers.

Implementation

1. Install the Flutter SDK: Set up the development environment with the Flutter SDK, Android Studio for Android, and Xcode for iOS.
2. Learn Dart: Master the fundamentals of the Dart language (strong typing, async/await, null safety) which is the foundation of all Flutter development.
3. Understand widgets: Grasp Flutter's widget composition model (StatelessWidget, StatefulWidget, InheritedWidget) and component lifecycle.
4. Choose a state architecture: Select an appropriate state management pattern (Provider, Riverpod, BLoC, GetX) based on project complexity.
5. Structure the project: Organise code in layers (presentation, domain, data) following clean architecture principles adapted to Flutter.
6. Configure CI/CD: Set up automated build pipelines with Codemagic, GitHub Actions, or Bitrise for iOS and Android builds.
7. Test and deploy: Write unit and widget tests, run integration tests, then publish to stores via automated pipelines.

Associated Technologies and Tools

• Dart: Programming language optimised for building user interfaces, with native compilation and efficient garbage collection.
• Firebase: Backend services suite (authentication, database, analytics) particularly well integrated with Flutter.
• Riverpod / BLoC: Popular state management libraries in the Flutter ecosystem.
• Codemagic: CI/CD service specifically designed for Flutter, simplifying builds and store deployments.
• Impeller: Flutter's new rendering engine replacing Skia for even better graphics performance.
• Flame: Flutter-based 2D game engine for mobile game development.

Conclusion

Flutter is a powerful framework that has democratised cross-platform development through its unique custom graphics rendering approach. It excels in projects requiring highly customised designs and perfect visual consistency across platforms. At KERN-IT, we consider it a solid alternative to React Native, particularly well-suited for teams not rooted in the React ecosystem. The choice between Flutter and React Native depends primarily on the company's technical context, available skills, and specific project needs. Both frameworks produce professional-quality applications.