How Flutter Works

Flutter is built in a whole new way, compared to other frameworks, working more like a gaming engine, than a traditional application framework. I will go through the high level basics of how Flutter works, and how it delivers the simple, high performance outcome. Starting at a very high level, your app is composed of Widgets, that are rendered onto a Skia canvas, and sent to the platform. The platform shows the canvas, and sends events back as required.

Your app runs on the platform in natively, Ahead of Time complied.

Platform

Starting at the platform level, Flutter provides a Shell, that hosts the Dart VM. The Shell, is platform specific, giving access to the native platform APIs and hosting the establishing the platform relevant canvas. There is also an embedder API, if you want to use Flutter like a library, instead of hosting running an app.

The Shells, also help provide communication to the relevant IMEs (e.g. Keyboard) and the systems application lifecycle events.

Engine

The engine is the next layer up, providing the Dart Runtime, Skia, Platform Channels and much more. You can see more of what the engine provides in the architecture diagram in the Flutter Wiki.

The Flutter engine is run inside the relevant platform Shell.

Framework

The Flutter framework is the most relevant to the app developer. It contains everything you will interact with, when developing your app.

Flutter apps can look like native iOS or Android applications, simply by using the right themes. Cupertino is for iOS and Material is for Android. You can also make your app look however you want, regardless of themes.

Widgets are the building blocks of your app. Flutter doesn’t have native controls or components. Flutter draws the UI output on a Skia Canvas. This reduces complexity drastically, as Flutter only has Widgets. Widgets are UI controls that you can use in your app. Your entire app will be made up of Stateless or Stateful Widgets.

You will have an immutable UI model, that you can keep generating as required and Flutter will render it for you. The Flutter framework comes with advanced animation, painting and gesture support, allowing any widget you create to behave how you want.

Once the UI is complete and rendered, it will move to the Engine, to be handled.

Rendering Pipeline

Flutter works more like a gaming engine, than an app framework you may be used to. The UI is built and rendered on a Skia Canvas as it changes. Flutter updates the UI at 60fps, and uses the GPU for most of the work. While this doesn’t affect how you build an app, it is the reason the Flutter UI will be buttery smooth.

Dart based application code will continue to run via the CPU, and in the specialized UI Thread, when touching UI related components.

Learn More

Flutter has a lot working under the hood, and I have only given a high level overview of each section. If you are interested to learn further, here are some resources.

Code Repositories

Technical Documents

Mobile Developer, Microsoft & Xamarin MVP

Share on
© 2018 Adam Pedley