Protection Status

Flutter Architecture || Architecture of Flutter || Flutter Tutorial

Updated: Apr 27

In this article, we are going to see about architecture of flutter. So, flutter architecture is mainly divided into four parts/components.

  1. Flutter Engine

  2. Foundation Library

  3. Widgets

  4. 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.

Previous Topic - Flutter First Program

Next Topic - Flutter vs React Native

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.

13 views0 comments

Related Posts

See All

Tut 5 Column || Flutter App Development

If you already read about Row widget from our previous blog then it will be very easy for you to understand about Column widgets because properties are almost same with Row widget. Column:- Column is

  • Facebook
  • Instagram
  • LinkedIn
  • 1024px-Telegram_logo.svg
  • download
  • YouTube
  • Google Play