How Flutter works under the hood and why it is game-changing
Flutter is Google’s latest mobile app SDK to develop beautiful, pixel-perfect, buttery smooth native apps for Android and iOS in record time. It integrates with your existing Android- and iOS-code and is used by many organizations — such as Alibaba — around the world.
This short introduction is packed with a lot of information and promises. Let’s have a look under the hood of Flutter and see how it works and why it is a game-changing SDK for app development.
Flutter System Architecture
Stateless or stateful Widgets are the building blocks of any Flutter app and can be themed to look like native Android (Material) or iOS (Cupertino) UI components. Widgets are rendered onto a Skia canvas with support for advanced animations and gesture recognition.
Flutter’s engine hosts the core technologies Skia — a 2D graphics rendering library — and the Dart language VM in a platform-specific shell. Any shell implements the respective platform APIs and handles the system’s application lifecycle events.
Using the Dart language allows Flutter to compile the source code ahead-of-time to native code. The engine’s C/C++code is compiled with Android’s NDK or iOS’ LLVM. Both pieces are wrapped in a “runner” Android and iOS project, resulting in an apk or ipa file respectively. On app launch, any rendering, input, or event is delegated to the compiled Flutter engine and app code. Having to package the engine with the app’s apk/ipa file currently leads to an increased app size of 4MB.
Fast startup and execution of an app are the benefits of compilation to native code. The UI is refreshed at 60fps — mostly using the GPU — and every pixel on the screen is owned by the Skia canvas which leads to a smooth, highly customizable UI.
For more detailed information about the system architecture and how it differentiates itself from e.g. platform SDKs, web views, and reactive views check out the following articles.
Why Flutter uses Dart
The Dart language is crucial for Flutter’s success. Wm Leler put together a great post about why Flutter uses Dart. I highly encourage you to check it out as I will only provide a brief rundown in the following.
- Dart is ahead-of-time (AOT) compiled into fast native X86 or ARM code for Android and iOS devices.
- Additionally, Dart can be just-in-time (JIT) compiled. This comes in handy during the development phase. It enables Flutter’s sub-second hot reload — which is significantly faster than Android’s Instant Run.
- Flutter uses Dart 2 — a garbage-collected, object-oriented language with a sound type system and type inferencing.
- Dart is single-threaded and does not allow preemptive scheduling nor shared memory. Hence, garbage collection is extremely fast and memory locks are not required. Threads explicitly yield using e.g. async/await. For Android and iOS, “a dedicated thread is created for the UI, GPU and IO task runners per engine instance. All engine instances share the same platform thread and task runner.” (see here)
- Dart has great tooling and IDE support in IntelliJ, Android Studio, and Visual Studio Code. IMHO it exceeds XCode’s support for Swift and Objective C by far.
- Dart has a fast-growing community and an extensive set of libraries and packages that can be used in Flutter apps. Find them on Dart’s package manager.
- Dart is very easy to learn for any developer — no matter if her background is C, Java, Kotlin, Swift, JS, Ruby, etc. Some organizations claim that with Flutter it is much easier to hire skilled developers because their background does not matter as much. In contrast, I hear a lot of Android and iOS developers struggling with e.g. React Native at first — as they feel it’s more tailored towards web developers.
Why Flutter is game-changing
The above-mentioned benefits of Flutter should be reason enough to give it a try — but you might wonder if it is actually production-ready.
In December 2018, Flutter 1.0 was announced — after a really long and stable beta phase. At the time, 3000+ Flutter apps have been published, including Alibaba’s 50+ million users Xianyu app.
It is to be noted that Alibaba did not rewrite the Xianyu app from scratch, but integrated Flutter with their existing codebase for Android and iOS respectively. They implemented highly frequented app features with Flutter for both platforms, leaving the rest of the app unchanged. I cannot stress enough the importance of this feature as a rewrite of an existing app is — in most cases — not feasible for organizations. Tomek at Groupon gives you a rundown of how to integrate Flutter into an existing app in his three-part blog series.
When it comes to building successful apps for millions of users, testing support and continuous integration (CI) and — delivery (CD) tooling are must-haves for frameworks like Flutter.
Flutter/Dart has fantastic testing support for Unit-, Widget-, and Integration tests. Particularly unit tests have significantly faster compile and execution time than respective tests on the Android and iOS platforms. Due to code sharing, there is no more excuse, to not write test cases and high test coverage can be maintained for all platforms. Additionally, QA testing will have high confidence that Android & iOS code behaves in the same way and more scenarios can be tested in less time.
Although several CI/CD services support Flutter, Codemagic was specifically created for Flutter projects. Their CI/CD service is set up in very few minutes and can be easily customized. Moreover, the service is still free of charge — which might change in the future.
The cherry on top is the project “Hummingbird”. It was presented during the Flutter Live event on December 4th, 2018. In the future, Flutter will have official support for web development.
Originally published on https://elevateX.de
