Как устроена архитектура Flutter?

«Как устроена архитектура Flutter?» — вопрос из категории Архитектура, который задают на 36% собеседований Flutter Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Архитектура Flutter состоит из нескольких слоев, написанных преимущественно на C++ и Dart.

Основные слои (сверху вниз):

  1. Фреймворк (Dart): Это уровень, на котором пишет разработчик. Он содержит:

    • Готовые библиотеки виджетов (Material, Cupertino).
    • Утилиты для анимации, жестов, работы с сетью (http).
    • Фундаментальные классы (Widget, Element, RenderObject).
  2. Движок (Engine, C++): Низкоуровневый слой, отвечающий за:

    • Рендеринг через Skia: Flutter сам рисует каждый пиксель на канвасе, минуя нативные компоненты ОС. Это обеспечивает идентичный UI на всех платформах и высокую скорость.
    • Компиляцию Dart (JIT для разработки, AOT для production).
    • Доступ к системным сервисам (файловая система, сеть, таймеры).
  3. Embedder (Платформо-специфичный код): Слой, который интегрирует движок Flutter в целевую операционную систему (iOS, Android, Windows, macOS, Linux). Он отвечает за создание окна приложения, потоков рендеринга и обработку событий ввода.

Ключевой принцип: "Всё — виджет". Даже отступы (Padding), выравнивание (Center) и преобразования (Transform) являются виджетами. Дерево виджетов — это неизменяемое (immutable) описание UI. Для эффективного обновления Flutter использует механизм сравнения через Element ("инстанс" виджета в дереве) и перерисовывает только измененные RenderObject.

Пример структуры приложения:

void main() => runApp(MyApp()); // Embedder запускает движок с этим виджетом

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Фреймворковый уровень: виджеты Material
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Архитектура')),
        body: Center(child: Text('Flutter рисует этот текст через Skia')),
      ),
    );
  }
}