Flutter: A beautiful mix of React and Dart for mobile SDK
This new open-source mobile app SDK from Google allows developers and designers to create modern mobile apps for iOS and Android. Written in Dart, this SDK takes the best from React to help developers build beautiful, cross-platform mobile apps.
Google’s new mobile UI framework has landed. Flutter is an open-source mobile app SDK that comes with its own framework, widgets, and tools. Google hopes that Flutter will make it easier and more efficient for developers to build and deploy “beautiful mobile apps” on all platforms, from Android to iOS and even Google’s Fuschia.
What’s in Flutter?
According to their page, a lot! While Flutter is still in the development phase, what they have is certainly impressive:
- Heavily optimized, mobile-first 2D rendering engine with excellent support for text
- Functional-reactive framework
- Rich set of widgets for Android and iOS
- APIs for unit and integration tests
- Interop and plugin APIs to connect to the system and 3rd-party SDKs
- Headless test runner for running tests on Windows, Linux, and Mac
- Command-line tools for creating, building, testing, and compiling your apps
Flutter has been flitting around for some time. The idea behind Flutter came to some curious Google engineers a couple of years ago. According to their site:
Back in 2014, some engineers in Google took a step back to ask, “What would a modern mobi-first rendering engine look like?” Without worrying about backward compatibility, or desktop concerns, or legacy constraints, they started coding a new engine named Sky. Encouraged by some of their initial performance measurements, they decided to make the experiment a real project and renamed it Flutter. In 2015, internal teams inside of Google started to take notice and began building apps on Flutter, and the flutter.io site was born.
Flutter’s guiding principles are simple. They focused on:
- Control– Developers deserve access to, and control over, all layers of the system. Which leads to:
- Performance– Users deserve perfectly fluid, responsive, jank-free apps. Which leads to:
- Fidelity– Everyone deserves precise, beautiful, delightful mobile app experiences.
Sounds simple, right? But how do they do it?
React + Dart = Flutter
So, what did Flutter take from React? While Flutter’s architecture was very clearly inspired by React, it still runs on the “write once, run anywhere” model. Besides, React (or Angular, for that matter) does not have its own built-in UI widget library. Flutter’s approach to widgets was a wholly new approach.
Flutter reinvents its own UI component library from scratch. These components are drawn using the platforms low-level graphics primitives. Thus, Flutter’s UI components are not html elements, nor are they native Android/iOS widgets. They are Flutter widgets. They have a pluggable look-and-feel. So they can look like iOS native widgets or Android native widgets.
In addition, Flutter is different because it implements most of its system in Dart. UI’s are coded in the same language as the rest of the app, keeping it simple and lowering the chance for errors.