How Flutter & Dart Code Gets Compiled To Native Apps

Pinedamg
3 min readFeb 9, 2022

How does Flutter and Dart work internally?

How is your Flutter app actually converted to a native app which can be published to the app stores?

Well, you have your Dart code which uses the Flutter framework or the Flutter API as I call it here, which stands for an application programming interface.

In the end that just means that Flutter gives you a collection of functions, of widgets, which you can use in your code to build the interface you want to build.

So you have your own widgets and your own code then composed of that set of built-in widgets or your own widgets which you can also build and you want to build for Android and iOS.

As I said, Flutter simply compiles that Dart code to native code for these different platforms, and that happens with the help of the Flutter SDK as a result, you get real apps to spit out with highly optimized high-performance code that’s based on your code but that’s not your code itself, instead, it’s the compiled version of that code and you really ship code that runs on the different platforms and that’s optimized and high performant because performance is actually a huge advantage of Flutter apps, Flutter out of the box gives you high-performance applications.

Now in case you worked before with let’s say React Native which is kind of an alternative to Flutter and I’ll come back to this in a second, it’s important to understand that Flutter does not use platform primitives.

So what do I mean with that?

We’re having our Flutter app and we’re targeting iOS and Android.

If we want to add a button then in Flutter with this UI as Code approach, we do so by adding a RaisedButton.

This is just an instruction in your Flutter code which tells Flutter to render a button in that part of your widget tree.

If you try to imagine what happens when the code is compiled, probably you could think that when the code gets compiled to that native code is that this RaisedButton is translated to the iOS, please give me your default button, which would be a UI button element in the iOS development, and for Android, a widget.button, that we get these native buttons which are of course part of the native development environments, but that’s not what happens.

Instead, Flutter has its own implementations because Flutter, that’s really important to understand and to keep in mind, directly controls every pixel on the screen.

So Flutter does not compile your code to some native equivalence or native alternatives, instead, Flutter ships with its own engine which controls the entire screen, everything the user sees, and renders every pixel on its own and that gives Flutter a lot of control and a lot of flexibility.

Now you don’t have to care too much about that because Flutter does it for you but it’s important to be aware of that because that gives Flutter more control and fewer limitations and therefore, you implicitly, indirectly benefit from that.

You have a good performance, you have a lot of power, a lot of things you can configure, you have full control over how you want to build your user interface.

Well, that’s all folks, I hope you enjoyed this new article regarding Flutter.

Please if this post helped you or think it was interesting, please don’t forget to share and give a Like, your approbation will give me the desire to write more and help you.

Thank you very much.

--

--