Flutter Architecture

The architecture of a Flutter application is based on its layered design, which ensures efficient rendering, fast performance, and a structured approach to application development. Here's a breakdown of the Flutter architecture and its core components:

1. Flutter Architecture Overview

Flutter follows a layered architecture consisting of:

1. Embedder (Platform-Specific Layer)
2. Engine (Core Rendering and Platform Services)
3. Framework (UI and Business Logic Layer)

2. Layers of Flutter Architecture

a. Embedder Layer

Role: This is the platform-specific code responsible for:

• Integrating Flutter with the native platform (Android, iOS, Web, Desktop).
• Providing platform channels for communication between Flutter and native components.

Examples:

• Android: Java/Kotlin code embedded in MainActivity.
• iOS: Swift/Objective-C code in AppDelegate.

b. Engine Layer

Role: Written in C++, the engine provides low-level services like:

• Rendering using Skia (a 2D rendering engine).
• Text layout.
• Input/output events handling.
• Communication between the Dart runtime and platform channels.

Key Components:

• Dart runtime: Executes Dart code.
• Skia: Renders the UI.
• Platform channels: Bridges native code and Dart for features like camera, GPS, etc.

c. Framework Layer

Role: Built in Dart, the framework is where developers write application code. It provides:

• Predefined widgets (StatelessWidget, StatefulWidget, etc.).
• UI, state management, and business logic.
• Libraries for animations, gestures, and layouts.

Key Components:

• Widgets: Core building blocks of the UI.
• Rendering Layer: Manages the layout and paints the widgets.
• Foundation Library: Provides basic classes and APIs (e.g., async, math, etc.).

3. Flutter Application Structure

Entry Point

The app starts from main() in Dart.

void main() {
  runApp(MyApp());
}

4. Example: Flutter Architecture in Action

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}
    

5. Key Advantages of Flutter’s Architecture

• Hot Reload: Immediate feedback for changes in the UI or logic.
• Customizable UI: Declarative and flexible design with widgets.
• Cross-Platform Development: Single codebase for multiple platforms.
• High Performance: Skia ensures fast rendering.

Widgets

The core concept of the Flutter framework is In Flutter, Everything is a widget. Widgets are basically user interface components used to create the user interface of the application. In Flutter, the application is itself a widget. The application is the top-level widget and its UI is built using one or more children (widgets), which again build using its children widgets. This composability feature helps us to create a user interface of any complexity.

Everything in Flutter is a widget, which is either:

• StatelessWidget: Immutable; does not depend on state.
• StatefulWidget: Mutable; maintains dynamic state.

MyApp
(Top level / Root)

MaterialApp

MyHomePage
(Property: home)

Scaffold

AppBar
(Property: appBar)

Center
(Property: body)

Text
(Property: child)

• MyApp is the user created widget and it is build using the Flutter native widget, MaterialApp
• MaterialApp has a home property to specify the user interface of the home page, which is again a user created widget, MyHomePage.
• MyHomePage is build using another flutter native widget, Scaffold.
• Scaffold has two properties – body and appBar.
• body is used to specify its main user interface and appBar is used to specify its header user interface.
• Header UI is build using flutter native widget, AppBar and Body UI is build using Center widget.
• The Center widget has a property, Child, which refers the actual content and it is build using Text widget.

Layers

The most important concept of Flutter framework is that the framework is grouped into multiple category in terms of complexity and clearly arranged in layers of decreasing complexity. A layer is build using its immediate next level layer. The top most layer is widget specific to Android and iOS. The next layer has all flutter native widgets. The next layer is Rendering layer, which is low level renderer component and renders everything in the flutter app. Layers goes down to core platform specific code.

The general overview of a layer in Flutter is specified in the below diagram:

Platform Specific Widgets

Widgets

Rendering

Animation / Painting / Gestures

Foundation

C / C++ Engine

Platform Specific

The following points summarize the architecture of Flutter:

• In Flutter, everything is a widget and a complex widget is composed of already existing widgets.
• Interactive features can be incorporated whenever necessary using GestureDetector. widget.
• The state of a widget can be maintained whenever necessary using StatefulWidget widget.
• Flutter offers layered design so that any layer can be programmed depending on the complexity of the task.