What do you know about the internal device of Flutter?

The core of Flutter consists of the engine, framework, and widgets.

• Flutter Engine: Written in C++, it provides low-level APIs for rendering, text handling, streams, and plugins. It interacts directly with the platform (iOS, Android, Web, Desktop) and graphics APIs (e.g., Skia). The engine manages rendering, asynchronous operations, and the application lifecycle.

• Flutter Framework: Written in Dart, it provides an abstraction layer over the engine. It includes many ready-made components:

  • Foundation: Basic classes and helper functions.
  • Rendering: Layer for managing the render tree and drawing.
  • Widgets: The main building blocks of UI, forming the widget tree.
  • Material Design and Cupertino: Sets of widgets implementing Material Design styles and iOS-style design.

• Widgets: Everything in Flutter is a widget. Widgets describe the UI configuration. There are two main types:

  • StatelessWidget: A widget without mutable state. Its UI depends only on its input parameters (properties).
  • StatefulWidget: A widget that can have mutable state. It consists of the widget itself and a State object, which holds the state and the UI building logic (build method).

Rendering Process:

1. Build: The framework calls the widget's build() method, which returns a tree of other widgets.
2. Element Tree: Based on the widget tree, an element tree (Element Tree) is created, representing the UI structure. Elements link widgets to their corresponding render objects.
3. Render Object Tree: Elements create and manage a tree of render objects (Render Object Tree). Render objects are responsible for layout, painting, and hit testing.
4. Painting: The engine uses Skia (on mobile and desktop) or CanvasKit (on the web) to draw Render Objects on the screen.

Reactive Programming:

Flutter uses a reactive approach to building UI. When the application state changes, the framework rebuilds the part of the widget tree that depends on that state. This is done automatically and efficiently through diffing and quick creation and destruction of widgets.

Hot Reload and Hot Restart:

• Hot Reload: Injects updated Dart code into a running app without losing state. Ideal for quick UI iteration.
• Hot Restart: Restarts the app from scratch with the updated code and reset state. Used when Hot Reload doesn't work, e.g., when changing initState or global variables.

Platform-specific code:

Flutter allows interaction with native platform APIs via platform channels (Platform Channels). This enables calling native code methods (Java/Kotlin on Android, Swift/Objective-C on iOS) and receiving results back in Dart.

// Example of using Platform Channel
import 'package:flutter/services.dart';

static const platform = MethodChannel('samples.flutter.dev/battery');

Future<void> getBatteryLevel() async {
  String batteryLevel;
  try {
    final int result = await platform.invokeMethod('getBatteryLevel');
    batteryLevel = 'Battery level: $result %.';
  } on PlatformException catch (e) {
    batteryLevel = "Failed to get battery level: '${e.message}'.";
  }
  // Update UI
}