In this article, we are going to see about architecture of flutter. So, flutter architecture is mainly divided into four parts/components.
Design Specific Widgets
Flutter Engine - Also, known as runtime for mobile apps and primarily based on C++ language.
It includes flutter core libraries including animation & graphics, file & network I/O Plugin Architecture, accessibility support and a dart runtime for developing, compiling & running flutter applications. Also includes Google Open Source Library "Skia", to render low level graphics.
Foundation Library - Includes all the required packages of basic building blocks of writing a flutter application. These libraries are already written in Dart Language.
Widgets - In flutter, everything is a widget. Everything means Everything. Start to End & Widget is the core concept of flutter. Widget is the user interface of flutter application means how user is going to see and control the app is going to decide by widget. Includes graphics, text, shapes & animations.
Here is the complete structure of a flutter application
In the above example figure, we can see that all the components are widgets that contain child widgets. Hence proved, the Flutter application is itself a widget.
Design Specific Widgets - Design Specific Widgets are used to give design to different platforms. That's why flutter have 2 design specific widget. One for Android, Other One for iOS/Apple.
Gestures - Gesture is also a widget in flutter application & we already know everything is a widget.
Gesture in flutter is implemented using Gesture Detector. GestureDector is an invisible widget which includes tapping, dragging and scaling interaction of its child widget.
Example - Swipe to unlock, Double Tap to Wake Screen
State Management - Flutter widget maintains its state by a widget named "Statefull Widget". It automatically adjusts the flutter application whenever a third party animation is rendered & also, it applies only necessary changes.
Layers - Last Topic Concept of our Flutter Framework is Layer. There are multiple layers of a flutter application which are grouped into multiple categories in terms of complexity and arranged in the top-down approach. The top most or the first layer is of UI - User Interface which is platform specific like different for Android & iOS each. The second top most flutter layer contains all flutter native widgets. The next or the 3rd layer is rendering layer which renders everything in the flutter application program. Then, the layers go down to Gestures, foundation library, engine, and finally, core platform-specific code. The following diagram specifies the layers in Flutter app development.
See the image below for layers reference.
Disclaimer: This content is proprietary to Fresher Side, this may contain confidential or privileged information. Any dissemination, use, review, distribution, printing or copying of this content is strictly prohibited.