New post Need visibility? Apply for a FREE post for your Startup.  Apply Here

Mobile

Understanding the Flutter Architecture – Techpadi

2 Mins read

So now that we know what Flutter is or that we at least have a rough idea about it, let’s have a look at the architecture of a Flutter application, and there, the most important thing is that Flutter uses code to build a user interface.
Now let’s, first of all, have a look at that widget thing again.
In Flutter, everything is a widget, that’s important to understand, you build your entire app in a widget.
So we have the widget tree, you have this root widget which is your app itself, then you have different sections and in there you might have a text input, text output, and so on. And a widget can also hold another widget, just keep the widget tree in mind.

UI as Code concept is also important, you build your UI with code not drag and drop.
One codebase thing or concept is also important to understand.

How Flutter & Dart code gets compiled to Native Apps? Well, you have your Dart code which uses the Flutter framework or the Flutter API as I call it here, which stands for Application Programming Interface (API). At 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.

Native Code

Flutter simply compile that Dart code to native code for these different platforms and that happens with the use of flutter SDK and 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 therefore you really ship code that runs on the different platforms and that’s optimized and high performance because performance is actually a huge advantage of Flutter apps.

(React Native) Flutter does not use platform primitive. what does that mean? We’re having our Flutter app and we’re targetting iOS and Android. So flutter directly controls every pixel on the screen. So Flutter does not compile your code to some 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.

Kindly go through the official documentation. Here

How to implement some flutter plugins with sample code coming up next. Kindly subscribe for update to get notified.

Happy fluttering 👨‍💻.

Don’t miss any tech news ever!

We don’t spam! Read our privacy policy for more info.

18 posts

About author
I'm passionate about learning and teaching programming, majorly Flutter at the moment. I make friends, develop, or learn from them.
Articles
Related posts
Mobile

Meta Explores Ad-Free Subscription for Facebook and Instagram

1 Mins read
Meta is considering launching an ad-free subscription service for Facebook and Instagram users in the United Kingdom, following a similar model already…
How TosMobile

Unveiling Xiaomi's Masterpiece: Mijia Smart Audio Glasses 2

2 Mins read
Xiaomi has recently revealed its latest masterpiece – the Mijia Smart Audio Glasses 2. These sleek smart glasses boast an impressive collection…
MobileRandom

What To Expect From iOS 19

2 Mins read
Apple’s upcoming iOS 19 update is expected to improve the way we interact with our iPhones. With newly updated features, and improvements…
Newsletter Subscription

🤞 Don’t miss any update!

We don’t spam! Read more in our privacy policy

Join our Telegram channel here - t.me/TechpadiAfrica

Leave a Reply