На чем написаны слои Flutter?

На чем написаны слои Flutter?

Флаттер имеет многослойную архитектуру. Каждый слой написан на разных языках и решает разные задачи. Понимание этого критично для production-разработки.

Архитектура Flutter

FLUTTER можно представить как набор слоёв:

1. Framework (Dart) — верхний слой, где пишут приложения
2. Engine (C++) — основной движок
3. Embedder — встраивание в платформы (iOS/Android)

Слой Framework (Dart)

Что это: Весь код, который пишут Flutter разработчики. Это библиотеки и классы на Dart.

Компоненты:

• widgets — Button, Text, Scaffold и т.д.
• material — Material Design компоненты
• cupertino — iOS design компоненты
• foundation — основные классы (Widget, State)
• services — доступ к платформе (camera, location)
• rendering — система отрисовки

Написано на: Dart

Пример:

// Это Dart код, работает на Framework слое
class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => print('Clicked'),
      child: const Text('Click me'),
    );
  }
}

Слой Engine (C++)

Что это: Основной движок Flutter, который отвечает за отрисовку, событиях, и коммуникацию с платформой.

Компоненты:

• Skia — библиотека для векторной графики (написана на C++)
• Dart Runtime — виртуальная машина Dart (C++)
• Platform Channels — коммуникация с native кодом
• Input/Event handling — обработка действий пользователя

Как работает: Flutter приложение запускает Dart виртуальную машину → UI дерево отправляется в Engine → Engine рисует пиксели через Skia на canvas → результат показывается на экране.

Написано на: C++ (для максимальной производительности)

Пример потока данных:

Dart код (Framework) 
    ↓
  Widget Tree
    ↓
  Flutter Engine (C++)
    ↓
  Skia Graphics
    ↓
  Native Canvas (iOS/Android)
    ↓
  Пиксели на экране

Слой Embedder (Platform-specific)

Что это: Код, который встраивает Flutter в Android и iOS.

Android (Kotlin/Java)

• Flutter Activity
• Native API доступ
• Permissions handling
• Sensor data

iOS (Swift/Objective-C)

• FlutterViewController
• Native API доступ
• Camera и microphone
• Push notifications

Пример native кода (Kotlin для Android):

class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        
        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, "com.example/native")
            .setMethodCallHandler { call, result ->
                when (call.method) {
                    "getBatteryLevel" -> {
                        val level = getBatteryLevel()
                        result.success(level)
                    }
                    else -> result.notImplemented()
                }
            }
    }
}

Как слои взаимодействуют

Platform Channels — мост между слоями

// Dart (Framework слой)
const platform = MethodChannel('com.example/battery');

final batteryLevel = await platform.invokeMethod('getBatteryLevel');
print('Battery: $batteryLevel%');

// Kotlin (Embedder слой - Android)
MethodChannel(flutterEngine.dartExecutor.binaryMessenger, "com.example/battery")
    .setMethodCallHandler { call, result ->
        when (call.method) {
            "getBatteryLevel" -> {
                val batteryLevel = getSystemBatteryLevel()
                result.success(batteryLevel)
            }
        }
    }

Диаграмма слоёв

┌─────────────────────────────────┐
│  Dart Application Code          │  ← Написано разработчиком
│  (Framework: Widgets, Material) │
└────────────┬────────────────────┘
             │
┌────────────▼────────────────────┐
│  Flutter Framework (Dart)        │  ← widgets, rendering, animation
└────────────┬────────────────────┘
             │
┌────────────▼────────────────────┐
│  Flutter Engine (C++)           │  ← Skia, Dart VM, Event handling
└────────────┬────────────────────┘
             │
┌────────────▼────────────────────┐
│  Platform Embedder              │  ← Android (Kotlin) / iOS (Swift)
│  (Android/iOS specific)         │
└────────────┬────────────────────┘
             │
┌────────────▼────────────────────┐
│  Native APIs                    │  ← Camera, Location, Permissions
│  (Android/iOS OS)              │
└─────────────────────────────────┘

Почему это важно

1. Производительность: Engine написан на C++, поэтому Flutter быстрый
2. Кроссплатформность: Framework написан на Dart, работает везде
3. Расширяемость: Platform Channels позволяют писать native код
4. Отладка: Понимание слоёв помогает найти bottlenecks

Практическое применение

Когда используются слои:

• Чистый UI → только Dart (Framework)
• Доступ к платформе (камера, GPS) → Platform Channels (Engine + Embedder)
• Критичная по производительности логика → native код (Embedder)
• Real-time обработка данных → native код (C++)

DevTools и отладка

Flutter DevTools позволяет видеть:

• Widget Tree (Framework слой)
• Performance metrics (Engine слой)
• Platform logs (Embedder слой)

flutter pub global activate devtools
flutter pub global run devtools

Все слои работают синхронно, обеспечивая 60 FPS на мобильных устройствах и выше на десктопе.