Why Flutter is Truely Cross-Platform: Looking into Skia and Impeller

Flutter has been rising as the top frameworks for application development. Although there have been other competitors (such as React Native), Flutter is one of the fastest in gaining popularity.

This article discusses exactly what makes Flutter so special, and why you should give it a try!

What is Cross-Platform?

Cross-platform refers to developing for more than one platform. Some frameworks or languages are geared towards one platform, like Swift for iOS or Kotlin for Android. Applications made specifically and only for one platform are called native applications.

For mobile development, although native applications may have better performance, often times using a cross-platform framework will enhance the overall development speed and keep the application consistent for different platforms. If you have a big workforce, and separate teams for iOS and Android that is well-maintained through a consistent UI library, then native development may be for you. However, for most smaller teams, cross-platform development may be the easier choice.

What makes Flutter Cross-Platform?

Flutter Architectural Digram from Flutter

Developers are directly exposed to and will manipulate the Flutter framework written with the Dart language. They usually would use the design widgets (Material for Android and Cupertino for iOS), which are rendered on the screen.

However, what makes Flutter special is it’s core engine. It was powered by Skia, but Flutter is slowly migrating to Impeller (already implemented in iOS, and is in the process of being implemented to Android). This C++ based engine is in charge of rasterizing (taking an image described in a vector graphics format and converting it into a bitmap image) new scenes when a new frame is generated. This engine also manages the runtime for Dart.

Flutter and Skia from Introducing Impeller — Flutter’s new rendering engine

The embedder is a platform-specific entry point, like Java for Android, or Objective-C for iOS. It initializes the engine above, and integrates the code into as plugins for native applications, then packages it accordingly.

This is what makes Flutter cross-platform, since its engine directly deals with the graphics, and has the entry point for diverse native applications.

Skia and Impeller

Skia is a open source library for 2D that supports a variety of platform-dependent backends. These APIs are capable of working across diverse platforms, which makes Skia cross-platform. Its features of rasterization and GPU-accelerated rendering, and focuses on directly drawing on the canvas, therefore makes Flutter fast. Skia powers Chrome and Android.

The Skia Canvas holds all the state regarding drawing on the device. This includes the reference to the device, and the stack of matrix values. The Paint holds the information about what should be drawn (paint objects). Combined, these are rasterized into a bitmap format using the renderer, which tells the GPU exactly what to do.

Basic Concept of Rendering from Introducing Impeller — Flutter’s new rendering engine

Basic Concept of Rasterization from Introducing Impeller — Flutter’s new rendering engine

Despite this astonishing technology, Skia has had its issues, with early-onset jank. This means there may have been some sort of pause on the first run. Flutter explains this may have to do with shader compilation. Shader is the final unit that runs on the Skia GPU. When seeing a new sequence of commands to run for the first time, Skia backend would compile the sequence, which is a process called shader compilation. However, shader generation is not as fast as it should be for a smooth display, which is the problem of this JIT (Just In Time) compilation, would cause the early-onset jank.

Because of this problem, the Flutter team has been working on a new engine called Impeller. Impeller is said to solve this problem, as smaller units of shaders will now be compiled before runtime (AOT), which would prevent the above performance issues.

The Impeller architecture is layered, with each layer depending on the previous to accomplish it’s job. Now each operation will create it’s own entity. Each entity is then mapped to the render pipeline containing the smaller units of shaders that are actually needed. This process means that a whole bunch of shaders are not all trying to be compiled at runtime, but the correct and efficient mapping occurs beforehand.

Operation mapping to an Entity from Introducing Impeller — Flutter’s new rendering engine

Each entity mapping to the correct render pipeline with the needed shader from Introducing Impeller — Flutter’s new rendering engine

Currently, Impeller is stable in iOS, and still in development for Android.

What’s Next?

Flutter’s team is hard at work with new releases, including the new default being Material 3, and the Impeller runtime now being available for Android on Vulkan devices.

The amazing architecture behind Flutter will lead to a delightful landscape for all developers world-wide! Although there are quite some limitation in creating web applications with Flutter (SEO optimization, intial slow rendering for SPAs), the rapid growth of Flutter will soon come to enhance this aspect as well.

Happy Coding!