Flutter Tutorial: The beginner’s guide to cross-platform
Flutter is built in a whole new way, comparing to other frameworks. And working more like a gaming engine, than a traditional application framework. Further, I will go through the high-level basics of how it works, and how it delivers a simple, high-performance outcome. Starting at a very high level, your app composed of Widgets. And it 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.
Flutter Platform
Starting at the platform level, it 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.
Flutter Engine
The engine is the next layer up, providing the Dart Runtime, Skia, Platform Channels, and much more. So, 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 additionally 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 make 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 use 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.
It has work on the desktop version of it here you go, also if you are in confusion about whether to choose Flutter or React Native then check this article for more details.
