Flutter Architecture

Flutter, an open-source UI framework by Google, facilitates cross-platform app development for Android, iOS, web, and desktops using a unified codebase. Built upon the Dart language, its architecture primarily encompasses the Flutter Engine, Foundation Library, and two pivotal components: Widgets and Design Specific Widgets, driving efficient and cohesive application design.

Flutter Architecture Layers

Flutter has a layered and flexible architecture. It consists of independent libraries, each depending on the underlying layer. The framework operates as a sequence of replaceable parts, with no layer having exclusive access to the lower layer. This design allows for greater extensibility and flexibility, as developers can easily modify or replace any part of the framework without affecting the rest of the system.

In this section of the article, you will now learn about various components of the Flutter architecture, which are as follows:

Embedder

The embedder layer is the lowest layer of the Flutter architecture. In the Flutter architecture, the embedded layer serves as the interface between the Flutter framework and the host platform. It is responsible for integrating the Flutter engine into the platform-specific host, allowing the Flutter application to run natively on various devices, including mobile, Web, and desktop.

The embedder layer handles platform-specific tasks such as input handling, rendering, and event loops. It provides the necessary APIs for communication between the platform-specific code and the Flutter framework. Additionally, the embedder layer supports embedding Flutter within other platforms and applications, enabling developers to use Flutter as a UI toolkit for their existing projects. For example, Flutter can be embedded within a native Android or iOS app or a web page using Flutter for the Web.

Engine

In Flutter's architecture, the engine is the framework's core and manages the entire application lifecycle. It provides a complete set of low-level services that handle everything from rendering and layout to animation and gesture recognition.

The engine is written in C++ and is designed to be platform-independent, allowing it to run on various devices and platforms. It also includes a virtual machine (VM) called Dart VM, which executes the application code written in Dart programming language.

The engine is optimized for high performance and provides a fast and smooth user experience, even on low-end devices. One of the unique features of the engine is its support for "hot reload," which allows developers to make changes to the application code and see the results immediately without recompiling the entire application.

Framework

The framework layer consists of three main components: the foundation, rendering, and widget layers.

The Foundation layer provides foundational classes and building block services, such as animations and gestures, which enable developers to abstract away complex implementation details.

The rendering layer converts the widget tree into pixels and renders them on the screen. This layer is called whenever there is any change in the widget's animation, input, or state, and it updates the layout accordingly.

The widget layer provides a collection of predefined widgets that can be used to create a widget tree. Developers can also create custom widgets using code, just like in ReactJS.

State Management

State management in Flutter refers to the management and manipulation of the various states and data within the app. Since Flutter apps are built using widgets, the state of a widget can be either mutable or immutable, and the data can be passed between the widgets using various methods.

There are different approaches to state management in Flutter architecture, and each has its advantages and disadvantages. Some of the commonly used state management solutions include:

setState(): This is the simplest approach to managing the state in a Flutter application. It is suitable for small applications, but for larger applications, it can lead to code that is difficult to maintain.

InheritedWidget: This is a Flutter widget that allows you to share data across the widget tree. It is useful for situations where you need to pass data between widgets that are not directly related.

Provider: Provider is a state management solution that helps to manage and share data across the widget tree. It is a lightweight solution that can be used for small to medium-sized applications.

BLoC (Business Logic Component): BLoC is an architecture pattern that separates the presentation layer from the business logic layer. It is a more complex solution that is suitable for large applications.

Redux: Redux is a predictable state management library that helps to manage the state of an application in a predictable way. It is suitable for complex applications that have a lot of data and states to manage.

Ephemeral/ Local Stage

In Flutter, an ephemeral or local state refers to the state that is used and managed within a single widget. This type of state is usually used to store information that changes frequently and is not needed by any other part of the application.

Local state is managed by the StatefulWidget class, which provides a State object that can be used to hold and modify the state of the widget. When the state of a widget changes, Flutter rebuilds the widget tree, and the new state is used to update the widget.

The local state can be useful for managing UI elements that depend on user input or interactions, such as form inputs, animations, and page navigation. For example, a form widget might use local state to keep track of the text entered by the user in the input fields, or a page widget might use local state to keep track of the current tab index.

App State

In Flutter, the app state refers to the global state of the entire application. This type of state represents the data and state that needs to be shared across multiple widgets or screens within the app. The app state can include data such as user authentication status, theme settings, or app preferences, and it can be modified by different parts of the application.

Flutter Widgets

Widgets are the basic building blocks for any Flutter application's UI. Widgets provide instructions for how to display their configuration and status. Widgets can be in the form of a button, image, icon, or layout, and can be combined to create a widget tree.

When a widget's state changes, it rebuilds its description. Widgets are the main components of a Flutter application's UI, with the application itself being a widget made up of a combination of widgets.

The root widget of a standard Flutter application defines the structure of the app, followed by a Material App widget that holds its internal components. The Material App widget includes a Scaffold widget, which holds visible components and has properties such as body and appears. All child widgets and their properties are defined within the Scaffold.

Typically, within a Scaffold widget, there is an app bar widget that defines the application's appbar, along with a body section where all the component widgets are placed. It is within this body section that the properties of these widgets are set, ultimately forming the homepage of the application.

To create the actual content of the page, a Center widget is often used with a Child property, which specifies the content itself. This content can be built using various widgets, such as the Text widget.

Here’s an example of using widgets in Flutter:

Output:

When the button is pressed the output is:

Widget Tree

A widget tree is a hierarchy of widgets in a Flutter application. The widget tree is the structure of the UI that defines how widgets are nested and arranged within the application. Each widget in the tree can have child widgets, which can in turn have their child widgets, creating a tree-like structure.

The widget tree is important because it determines how the UI is displayed to the user, and changes to the widget tree can result in updates to the UI. When a widget's state changes, it rebuilds its description, which is then compared to the previous description to determine how the render tree should transition between states. This allows for efficient updates to the UI without the need for a full reload of the entire application.

Gestures

Flutter allows for widget interaction through the use of a special widget called GestureDetector. This widget, which is not visible on the UI, can detect various user events like taps, start, update, end, and drags with its child widgets. With the help of GestureDetector, Flutter offers robust support for all kinds of gestures, enabling the addition of interactive features to existing widgets.

Widget State

Widget State are the arrangement and information linked with a widget during a specific point in time. The state of a widget can change dynamically due to user input, application logic, or other factors.

A widget's state can be either immutable or mutable. Immutable state is set once when the widget is constructed and cannot be changed thereafter, while the mutable state can be modified and updated during the widget's lifetime.

When a widget's state changes, it rebuilds its description, which is then compared to the previous description to determine how the render tree should transition between states. This allows for efficient updates to the UI without the need for a full reload of the entire application.

Stateless Widgets

Stateless widget is a widget that does not have any mutable state properties. This means that once a stateless widget is built, it cannot be changed, and it will always display the same information or UI configuration. Stateless widgets are ideal for displaying static content that does not require updating in response to user interactions or changes in the application's state. Stateless widgets are also more efficient than stateful widgets, as they do not need to rebuild themselves when their state changes.

To create a stateless widget in Flutter, a developer must extend the StatelessWidget class and override the build() method to describe the widget's UI. Since stateless widgets do not have any mutable state, the build() method must return a Widget that is determined entirely by the widget's configuration and properties at the time it was built.

Stateful Widgets

Stateful widget is a widget that has mutable state properties, meaning that it can change its configuration or UI based on interactions with the user or changes in the application's state. Stateful widgets are ideal for creating dynamic UIs that update in response to user input or changes in the application's data. They are also more flexible than stateless widgets, as they can respond to changes in their state or the state of other widgets in the widget tree.

To create a stateful widget in Flutter, a developer must extend the StatefulWidget class and implement both a StatefulWidget subclass and a State subclass. The StatefulWidget subclass describes the widget itself, while the State subclass holds the mutable state data and defines how the widget should update in response to changes in that state.

When a stateful widget is created, its state object is also created, and the build() method of the StatefulWidget subclass is called to describe the initial UI of the widget. When the state of the widget changes, the setState() method is called to update the state object and trigger a rebuild of the widget's UI, allowing it to update dynamically based on the new state.

Flutter’s Rendering Process

The rendering process in Flutter is responsible for transforming the widgets of an application into a visual UI that can be displayed on the user's screen. This process involves several steps, including the creation of a widget tree, layout, and painting.

1. The first step in the rendering process is the creation of a widget tree. This tree represents the hierarchical structure of the widgets in the application and defines their relationship to one another. Each widget is responsible for describing its appearance and position within the tree.
2. Once the widget tree has been created, the layout process begins. This process determines the size and position of each widget within the tree, taking into account any constraints that may have been specified. The layout process also determines the size of the application's viewport, which represents the visible portion of the UI that the user can see on their device's screen.
3. After the layout process is complete, the painting process begins. This process involves converting the widget tree into a series of low-level graphics commands that can be sent to the device's graphics hardware. Each widget is responsible for painting itself onto a canvas, using the layout information that was computed in the previous step.
4. Finally, the composite process combines all of the painted widgets into a single image that is displayed on the user's screen. This image represents the visual UI of the application and is updated in response to changes in the widget tree or the application's state.

How Does Flutter Integrate With Other Code?

Flutter can integrate with other code in several ways:

Platform channels: Flutter provides a mechanism called platform channels that allows communication between Flutter and native code. Platform channels can be used to call platform-specific APIs and to pass data back and forth between Flutter and native code.

Plugins: Flutter plugins are pre-built packages providing platform-specific API access. Plugins are typically published to the pub.dev package repository, and they can be easily added to your Flutter project by adding a dependency to your pubspec.yaml file.

Dart packages: Flutter is built using the Dart programming language with a large ecosystem of third-party packages. You can use any Dart package in your Flutter project by adding a dependency to your pubspec.yaml file.

REST APIs: Flutter can communicate with REST APIs using the built-in http package or other third-party packages. You can use REST APIs to retrieve data from remote servers and send data to remote servers.

WebViews: Flutter provides a WebView widget that can be used to display web content within a Flutter app. You can use WebViews to integrate web-based functionality into your Flutter app.

Advantages of Using Flutter

1. Fast Development: Flutter offers a hot reload feature that allows developers to see the changes in the app immediately after saving the code. This helps in faster development, and the app can be developed and updated quickly.

2. Cross-Platform Development: Flutter enables developers to create a single codebase that works across multiple platforms, such as Android, iOS, and web applications, reducing development time and costs.

3. Expressive and Flexible UI: Flutter offers a rich set of customizable widgets and tools to build beautiful and responsive user interfaces with animations and transitions, providing an excellent user experience.

4. Access to Native Features: Flutter allows developers to access native device features such as cameras, GPS, and sensors, providing a seamless experience for users.

5. High Performance: Flutter apps are compiled into native code, which ensures high performance and fast startup times, resulting in a smooth and responsive user interface.

6. Community Support: Flutter has a growing community of developers, which provides support, resources, and plugins, making it easier to develop apps and solve problems.

7. Open Source: Flutter is an open-source platform, which means that developers can use, modify, and distribute it without any licensing fees, making it an affordable choice for app development.

8. Integration with Firebase: Flutter integrates seamlessly with Firebase, providing developers with a wide range of backend services, such as authentication, storage, and database, making it easier to build complex applications.