Flutter + Dart + Skia = ❤

If you are a software geek, you must have heard about Flutter — the open-source SDK from Google for cross-platform development. There’s so much hype being created and it has become a trend in GitHub and StackOverflow.

But how is it possible for Flutter to generate applications for most platforms, especially for Android and iOS, from a single code-base 🤔?

The simple answer is — Dart and Skia.

Come, let’s have a look at how this duo does the magic!

Dart from Google - Open source ❤️

There are so many programming languages out there and why did Google choose Dart, a fairly new language, for Flutter?

Um, I had the same question at first. The Flutter team tried many languages, including JavaScript — listen to what Eric Seidel said, who leads Flutter team at Google.

Reasons for choosing Dart :

AOT compilation

JIT compilation

Dart VM

Wait wait... what are AOT and JIT?

AOT - Ahead Of Time : As the name says, compilation to native code is done before the execution, that is, Ahead Of Time. So, no delay will happen at the execution time as the entire code is already compiled to native code. In Flutter, this is used in taking release builds .ipa for iOS and .apk for Android.

JIT - Just In Time : Development is super fast with Flutter as we can see the changes instantly. Be it a color change, an icon shape change — you can see it by saving the file in IDE. This is hot reload and happens with the help of JIT compilation. Hot reload works by injecting updated source code files into the running Dart Virtual Machine (VM). After the VM updates classes with the new versions of fields and functions, the Flutter framework automatically rebuilds the widget tree, allowing us to quickly view the effects of the changes.

Hot reloading, read more at flutter.dev

Hot reloading is a great advantage of Flutter when compared to native development where we’re supposed to rerun the entire application to see a simple change.

Dart VM : In the JIT mode Dart VM is capable of dynamically loading Dart source, parsing it and compiling it to native machine code on the fly to execute it. This mode is used when we develop our app and provide features such as debugging, hot reload, etc.

In the AOT mode, Dart VM does not support dynamic loading/parsing/compilation of Dart source code. It only supports loading and executing the precompiled machine code. However even precompiled machine code still needs VM to execute, because VM provides runtime system which contains garbage collector, various native methods needed for dart:* libraries to function, runtime type information, dynamic method lookup, etc. This mode is used in our deployed app. credits — stackoverflow

After all, Dart is from Google 😎 and the Flutter team could directly work with them to bring out stunning features such as AOT compilation which wasn’t included with the tooling at first.

Skia — The Graphics engine

P reface : Skia serves as the graphics engine for Google Chrome and Chrome OS, Android, Mozilla Firefox and Firefox OS, and many other products.

There is no more explanation needed for proving how powerful Skia is. Right? 😆

In Flutter, everything we see on the screen (widgets) is created/painted by Skia. This is the exact same behavior of a typical gaming application in which the UI rendering is done by the included graphics engine.

Flutter is different than most other options for building mobile apps because Flutter uses neither WebView nor the OEM widgets (platform specific UI elements) that are shipped with the device. Instead, Flutter uses its own high-performance rendering engine to draw widgets.

Flutter with Flare cherry topping ❤️

This is in contrast with React Native, which replaces the JavaScript code with the OEM equivalent widget through bridging. Flutter gets the upper hand here by getting control over every pixel and thus making it deliver smooth animations and transitions. By including Skia, Flutter could render UI independently thus reducing device interaction only for accessing platform services such as Bluetooth, Location.

In a nutshell — Developers can design custom UIs irrespective of what was shipped with the device.

Question : As Flutter paints UI by its own, can we replicate the exact same UI irrespective of the underlying platform?

Yes! this is possible.

Have a look at how the iOS specific UI element — ActionSheet gets rendered on an Android emulator.

iOS ActionSheet on Pixel 2

and Android UI element — AlertDialog rendered on an iOS simulator.

Android AlertDialog on iPhone X

Note that, this is not a recommended design pattern, it just proves that we can design the same UI on both platforms.

The final quote :

Dart and Skia combination helps Flutter to deliver 100% native experience with more control over UI. It is becoming the most viable solution for cross-platform development and is on the rise, being used by many, including production applications built with. Also, the team has widened its focus to include Web and Desktop support too .

— Let’s wait for the magic to happen!

If you liked the article — beat the clap icon, your 50 claps will make my day!