Что такое Flutter с технической стороны?

Flutter с технической стороны

Flutter — это гораздо больше, чем просто фреймворк для создания мобильных приложений. Это полнофункциональная платформа с собственным графическим движком, виртуальной машиной и инструментами разработки.

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

Flutter состоит из нескольких слоёв:

┌─────────────────────────────────────────┐
│         Dart Framework (Flutter)        │
│  (widgets, rendering, animation layer)  │
├─────────────────────────────────────────┤
│         Dart Runtime / Isolate          │
│    (Garbage Collection, JIT/AOT)        │
├─────────────────────────────────────────┤
│        Skia Graphics Engine             │
│     (2D Graphics Rendering)             │
├─────────────────────────────────────────┤
│  Platform Layer (iOS/Android/Web/etc)   │
│  (Native APIs, Platform Channels)       │
└─────────────────────────────────────────┘

Ключевые технические компоненты

1. Dart язык программирования

Flutter построен на Dart — объектно-ориентированном языке, разработанном Google. Dart имеет отличные характеристики для UI разработки:

// Null safety — безопасность типов
String? nullableString = null;
String nonNullString = 'Hello';

// Асинхронное программирование
Future<String> fetchData() async {
  final response = await http.get(url);
  return response.body;
}

// Мощная система типов
var items = <String, int>{'apple': 5, 'banana': 3};

2. Skia Graphics Engine

Flutter использует Skia — высокопроизводительный 2D графический движок от Google. Это один из главных факторов производительности Flutter.

• Рендерит все UI элементы самостоятельно
• НЕ использует нативные UI компоненты (Material/Cupertino реализованы в Dart)
• Обеспечивает идентичный внешний вид на всех платформах
• Поддерживает аппаратное ускорение (GPU)

3. Dart Virtual Machine (DVM) / Runtime

Future приложения выполняются в изолированной среде (Isolate):

// Isolate — изолированный поток с собственной памятью
future.Isolate.spawn(heavyComputation, dataToProcess);

Особенности:

• Каждый isolate имеет собственную кучу (heap)
• Сборка мусора работает в каждом isolate независимо
• Изоляты не делят память (безопасный многопоточность)

4. Widget Tree и Rendering Pipeline

Flutter использует реактивную парадигму: всё — это виджеты.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello'),
        ),
      ),
    );
  }
}

Процесс рендеринга:

1. Build Phase: Построение дерева виджетов
2. Layout Phase: Вычисление размеров и позиций
3. Paint Phase: Рисование на Skia canvas
4. Composite Phase: Отправка на GPU

Hot Reload — как это работает?

Одна из самых крутых фишек Flutter.

// Изменяешь код и сохраняешь...
ElevatedButton(
  onPressed: () {},
  child: Text('Click me'),  // Изменил текст
)

// Flutter:
// 1. Перекомпилирует только изменённые виджеты
// 2. Перестраивает дерево виджетов
// 3. Переоценивает layout
// 4. Перерисовывает UI
// Всё это за 100-200ms!

Ота работает благодаря JIT компиляции в debug режиме.

Platform Channels

Для доступа к нативным API (камера, GPS, платежи и т.д.):

// Dart сторона
static const channel = MethodChannel('com.example/native');

var result = await channel.invokeMethod('getNativeData');

// Swift сторона (iOS)
let controller = GeneratedPluginRegistrant.registry()
let channel = FlutterMethodChannel(name: "com.example/native",
                                   binaryMessenger: controller.binaryMessenger)

channel.setMethodCallHandler { call, result in
  if call.method == "getNativeData" {
    result("Native data")
  }
}

Производительность: 120 FPS

Flutter целится на 120 FPS на современных устройствах.

// Timeline профилирования
Flutter DevTools > Performance tab показывает:
// - Frame rendering time
// - Build phase duration
// - Paint phase duration
// - GPU frame time

Когда frame пропускается:

• Пользователь видит jank (рывки)
• Flutter вычисляет что заняло слишком много времени
• Разработчик может оптимизировать

Garbage Collection

Dart использует генеральную сборку мусора, оптимизированную для временных объектов (обычные в UI разработке).

// Это создаёт временный список (и сборка мусора быстро его удалит)
var filtered = items.where((item) => item.isValid).toList();

// Лучше избегать создания новых объектов в build методе
bad() {
  return Container(
    child: Text('Hello'),
    margin: EdgeInsets.all(16), // Новый объект каждый раз!
  );
}

good() {
  return Container(
    child: Text('Hello'),
    margin: _margin, // Константное значение
  );
}

AOT и Release Build

flutter build apk --release

Процесс:

1. Dart code → Генерирует машинный код (ARM/x86)
2. SkiaEngine скомпилирована в native код
3. Platform layer (Java/Kotlin) интегрирован
4. Результат: APK с native код

Многоплатформенность

Та же кодовая база компилируется для:

• Android → ARM/x86 машинный код
• iOS → ARM64 машинный код
• Web → JavaScript (через Dart2JS)
• Desktop (Windows/macOS/Linux) → Native исполняемый файл

Всё благодаря Dart и Skia, которые работают везде.

Типизированность и Type Safety

Dart имеет strong typing с type inference:

// Type inference
var number = 42;        // int
var text = 'hello';     // String
var items = [1, 2, 3];  // List<int>

// Generic типы (как TypeScript)
class Repository<T> {
  final List<T> items = [];
  
  T get first => items.first;
}

// Null safety
String? nullableString = null;
String nonNullString = nullableString ?? 'default';

Заключение

Flutter — это не просто фреймворк, а полнокровная платформа разработки с собственным движком, язык программирования, эффективным JIT/AOT, мощной системой типов и инструментами для быстрой разработки. Комбинация Dart + Skia + Hot Reload делает её уникально подходящей для мобильной разработки.