What is flutter architecture ?

Overview

Flutter architecture is a layered framework built on Dart that runs on multiple platforms (iOS, Android, Web, Desktop). It consists of three main layers: Framework (Dart), Engine (C/C++), and Embedder (platform-specific).

---

Architecture Layers

1. Framework Layer (Dart)

The top layer written entirely in Dart, containing everything developers interact with.

dartCopy
// Framework components
MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('My App')),
    body: Center(child: Text('Hello')),
  ),
)

Sub-layers:

• Material/Cupertino — UI component libraries (widgets)
• Widgets — Core building blocks (StatelessWidget, StatefulWidget)
• Rendering — Low-level layout and painting (RenderObject tree)
• Animation/Gestures — Touch, animation, accessibility
• Foundation — Core utilities (ChangeNotifier, Key, etc.)

2. Engine Layer (C/C++)

The core runtime that powers Flutter, written in C++ for maximum performance.

Responsibilities:

• Skia — 2D graphics rendering engine (draws UI to screen)
• Dart Runtime — Runs Dart VM (or AOT compiled code)
• Text Rendering — Uses platform text engines (Harfbuzz, ICU)
• Accessibility — Semantic tree for screen readers
• Plugin Architecture — Platform channels for native code

dartCopy
// Engine handles low-level rendering
// When you call setState(), engine re-paints via Skia
setState(() {
  counter++;
});

3. Embedder Layer (Platform-Specific)

Platform-specific code that hosts the Flutter engine.

Per Platform:

• Android — Java/Kotlin embedder (runs engine in Activity)
• iOS — Objective-C/Swift embedder (runs in UIViewController)
• Web — Dart compiled to JavaScript (runs in browser)
• Desktop — Windows (C++), macOS (Objective-C), Linux (GTK)

kotlinCopy
// Android embedder example
class MainActivity: FlutterActivity() {
  // Hosts Flutter engine
}

---

How It Works (Widget → Pixels)

textCopy
1. Widget Tree (Dart)
   ↓ build() method
2. Element Tree (manages widget lifecycle)
   ↓ createElement()
3. RenderObject Tree (layout & paint)
   ↓ Skia rendering
4. Pixels on Screen

Example:

dartCopy
// 1. Widget Tree
Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Text('Hello'),
)

// 2. Flutter builds Element Tree internally
// 3. Creates RenderObject for layout (RenderBox with constraints)
// 4. Skia paints blue rectangle + text to screen

---

Key Architectural Concepts

Reactive Framework

Flutter rebuilds UI when state changes (like React).

dartCopy
class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Text('$count'); // Rebuilds on setState()
  }
}

Everything is a Widget

UI, layout, styling — all represented as widgets (composable tree).

dartCopy
Column(            // Layout widget
  children: [
    Text('Hi'),    // UI widget
    Padding(       // Styling widget
      padding: EdgeInsets.all(8),
      child: ElevatedButton(...),
    ),
  ],
)

Platform Channels

Communicate with native code via asynchronous message passing.

dartCopy
static const platform = MethodChannel('com.example/battery');

Future<int> getBatteryLevel() async {
  final int level = await platform.invokeMethod('getBatteryLevel');
  return level;
}

---

Architecture Diagram

textCopy
┌─────────────────────────────────────┐
│  Flutter Framework (Dart)           │
│  - Material/Cupertino               │
│  - Widgets, Rendering, Animation    │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│  Flutter Engine (C/C++)             │
│  - Skia (graphics), Dart VM         │
│  - Text, Accessibility              │
└─────────────────────────────────────┘
              ↓
┌─────────────────────────────────────┐
│  Platform Embedder                  │
│  - Android, iOS, Web, Desktop       │
└─────────────────────────────────────┘

---

Advantages

Learn more:

• Flutter Architectural Overview
• Inside Flutter