Flutter Architecture

    In this section we will be describing the basic architecture of a flutter application. There are 4 basic units of the flutter architecture.

  1. Flutter Engine
  2. Flutter Foundation Library
  3. Widgets
  4. Design Specific Widgets

Flutter Engine

Flutter is a mobile app SDK Developed by google for crafting high-quality native interfaces in record time.
The Flutter Engine is a portable runtime for hosting and running Flutter applications. It implements Flutter’s core libraries like graphics, file I/O operations, network I/O operations, accessibility support and plugin architecture, and Dart runtime and compile toolchain.

Flutter Foundation Library

These are the basic building blocks for writing Flutter applications.These applications are packaged and written in Dart.

Widgets

In Flutter, everything is a widget. It is the core concept of this framework. A Widget is basically a user interface component that helps in controlling the view and interface of the app. It is an immutable description about the user interface which includes the graphics, text, shapes, and animations that are created using different widgets. The widget is similar to a React component.

In a sense we can say a flutter application is a widget containing various sub widgets. This means the main app is the top-level widget, and its UI is built using one or more children widgets, which again includes sub child widgets. This feature helps to create a very complex user interface very easily.

flutter-parent-widget

Design Specific Widgets

The Flutter framework contains two sets of widgets which help to specifically design The application like Material Design for Android Side and Cupertino Style for IOS side.

Gestures

This widget provides interaction (how to handle movements and respond to) in Flutter using GestureDetector. It is an invisible widget, which includes tap, drag, scale and other interaction with child widgets. We can also use other interactive features in the existing widgets by composing them with this widget.
State Management

Flutter widget maintains its state by using a StatefulWidget widget. It auto re-render whenever its internal state changes. This re-rendering is optimized by calculating the distance between old and new widget UI and rendering only necessary sub widgets.

Layers

Layers are the most important concept in the Flutter framework, as they are grouped into multiple categories based on complexity and arranged in the top-down approach. The top layer is the UI , which is specific to the different platforms for which we are developing the app. The second layer contains all the Flutter native widgets. The next layer is the rendering layer, which renders all the widgets in the Flutter app. Then, the layers go down from Gesture to foundation library to engine, and finally, core platform-specific code.

flutter-layers-dev

Subscribe Now