Flutter Architecture

In this blog, we will talk about the architecture of Flutter, as well as the core principles and concepts that form its design.

Flutter consists majorly of 2 parts-

1.Framework with UI Library

It consists of various reusable UI components, such as sliders, buttons, text inputs, etc. 

2.Software Development Kit (SDK)

Flutter Software Development Kit is a set of tools to develop applications and compile your code into the native machine code for Android as well as iOS.

The Flutter architecture mainly consists of four key components-:

Flutter Engine

It is a portable runtime for hosting Flutter applications. It is used to implement Flutter's core libraries, animation and graphics, files and network I/O, accessibility support, plugin architecture, and Dart runtime and compile toolchain. Most developers interact with Flutter via the Flutter Framework, which provides developers with a reactive framework and a rich set of platform, layouts, and foundation widgets.

The flutter engine takes Google's open-source graphics library Skia to render low-level graphics.

Foundation Library

Flutter’s Foundation Library consists of all the required packages for the basic building blocks of writing a Flutter application. All of these libraries are written in the Dart language. Basic foundational classes and building block services such as animation, painting, and gestures offer commonly used abstractions over the underlying foundation.

Widgets

“EVERYTHING IN FLUTTER IS A WIDGET,” you must have heard this phrase many, many times before. In Flutter, the app in itself is a widget consisting of many sub widgets. Meaning the application is the top-level widget, with its UI being built up of children widgets.

A widget is basically an immutable object that describes a specific part of a UI. They are built using a modern framework that takes inspiration from React. The main idea is for you to build your UI out of widgets. 

Widgets describe what your application should look like, given its current configuration and state. The change of state causes the widget to rebuild its description. 

The Flutter framework consists of two sets of widgets conforming to specific design languages or platforms, known as Design Specific Widgets. 

Material Design - Usually used for making apps conforming to norms of Android UI.

Cupertino Style - It is used for making apps conforming to iOS applications UI.

    Widgets in flutter are majorly of two types -:

Stateless Widget:  The widgets whose state can not be altered once they are built are known as stateless widgets. They have an immutable state. They don't save values that may change.

Stateful Widget: Dynamic widgets that can be updated during the runtime based on user action or data change, with a mutable state, are called Stateful Widget. They can monitor changes and update the UI accordingly.

Layers

Flutter is arranged as a layered, extensible system. It functions in a sequence of independent libraries, with each of them depending on the layer beneath. Each part of the framework in a level is replaceable, with no layer having privileged access to the layer below.