Flutter — ключевые понятия, архитектура и виджеты

Что такое Flutter

Flutter — это SDK (Software Development Kit) и фреймворк для создания пользовательских интерфейсов, анонсированный Google в 2015 году. Первая стабильная версия Flutter 1.0 вышла в декабре 2018 года. В отличие от React Native, Flutter не использует мост между JavaScript и нативным кодом — он компилируется напрямую в нативные инструкции процессора.

Ключевая особенность Flutter — собственный движок рендеринга. Фреймворк не полагается на UIKit (iOS) или View-систему Android. Вместо этого Flutter рисует каждый пиксель самостоятельно через Skia (до 2024 года) или новый движок Impeller. Это гарантирует одинаковый внешний вид приложения на всех платформах и устраняет проблемы с адаптацией под разные версии ОС.

По данным Statista 2024, Flutter занимает первое место среди кросс-платформенных фреймворков по популярности: около 46% разработчиков используют его для мобильной разработки. Фреймворк применяется в проектах Google Pay, Alibaba, eBay, BMW и Tencent.

История и версии Flutter

Первая альфа-версия Flutter была представлена на Dart Developer Summit в 2015 году под названием Sky. В 2018 году вышел Flutter 1.0 с поддержкой только iOS и Android. Flutter 2.0 (2021) добавил Web и Desktop. Flutter 3.0 (2022) ввёл стабильную поддержку macOS и Linux. Flutter 3.16 (2023) представил Impeller — новый движок рендеринга на основе Metal и Vulkan.

Версия Flutter 3.22 (2024) включает Impeller по умолчанию на iOS, улучшенную поддержку Material Design 3, Dart 3.4 с расширениями макросов и встроенную поддержку Native Assets для прямого доступа к ресурсам платформы. Google сообщает, что Impeller снижает пропуски кадров (jank) на 90% по сравнению со Skia.

Язык Dart

Dart — язык программирования, созданный Google в 2011 году и используемый в Flutter. Dart сочетает строгую типизацию с возможностями JIT-компиляции (для Hot Reload) и AOT-компиляции (для продакшн-сборок). Версия Dart 3.0 (2023) ввела pattern matching, sealed class и records как стабильные функции.

Null safety в Dart — обязательная функция, внедрённая с версии 2.12. Компилятор проверяет все nullable-типы на этапе сборки, исключая NullPointerException в рантайме. Типы данных (int, String, bool) по умолчанию non-nullable, а для nullable-значений используется суффикс ? (например, String? name).

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

Архитектура Flutter построена по трёхуровневому принципу. Нижний уровень — движок (C/C++), отвечающий за рендеринг, ввод/вывод и доступ к платформенным API. Средний уровень — фреймворк (Dart), реализующий систему виджетов, жестов, анимаций и навигации. Верхний уровень — приложение (Dart), которое собирает виджеты в дерево.

Виджеты и дерево виджетов

В Flutter всё является виджетом. Виджеты бывают двух типов: StatelessWidget (неизменяемый, не хранит состояние) и StatefulWidget (изменяемый, управляет состоянием через State). Дерево виджетов (Widget Tree) — это иерархическая структура, где каждый дочерний виджет вложен в родительский. Scaffold, AppBar, Container, Text, Column, Row — базовые строительные блоки.

BuildContext — это объект, который передаёт позицию виджета в дереве. MediaQuery.of(context) получает размеры экрана, Theme.of(context) — текущую тему оформления. BuildContext используется для навигации (Navigator.of(context)), доступа к InheritedWidget и трансляции локали через Localizations.of.

Движок Impeller

Impeller — это современный движок рендеринга Flutter, написанный на C++ и использующий Metal (iOS/macOS) и Vulkan (Android). В отличие от Skia, который перерисовывал каждый кадр с нуля, Impeller компилирует шейдеры заранее и хранит их в кэше. Это устраняет задержки при первой отрисовке сложных сцен и снижает нагрузку на GPU.

Тесты Google Flutter Team показывают, что Impeller сокращает время компиляции шейдеров с 200–500 мс (Skia) до 1–3 мс. На iPhone 13 Pro импульсный рендеринг Impeller достигает 120 FPS без пропусков кадров. На Android с Vulkan стабильные 60 FPS даже на устройствах среднего сегмента (Xiaomi Redmi Note 12).

Пример приложения на Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter App')),
        body: const Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

Преимущества Flutter

Единая кодовая база — главное преимущество Flutter. Один проект на Dart компилируется под iOS, Android, Web, Windows, macOS и Linux. По оценке компании Google, это сокращает время разработки на 30–50% по сравнению с раздельными iOS и Android проектами. Alibaba сократила время вывода версий на 30% после перехода на Flutter.

Производительность Flutter близка к нативной. AOT-компиляция Dart в машинный код ARM и x86_64 исключает задержки интерпретации. Движок Impeller гарантирует 60 FPS даже на устройствах 2018 года (iPhone XR, Samsung Galaxy S9). По данным Google, 99.5% кадров в Flutter-приложениях отрисовываются без пропусков.

Hot Reload — технология мгновенного обновления кода. Разработчик меняет исходный код, сохраняет файл, и Flutter перестраивает дерево виджетов за 300–800 мс без потери текущего состояния приложения. Это ускоряет итерации UI-дизайна: можно менять отступы, цвета и анимации за секунды, не дожидаясь полной пересборки.

Material Design 3 и собственный дизайн-язык Cupertino (iOS-стиль) входят в стандартную поставку Flutter. Виджеты Material 3 поддерживают динамические цвета (Material You), адаптивную вёрстку и анимацию перехода между экранами. CupertinoPageTransition и CupertinoNavigationBar копируют поведение нативного iOS-навигатора.

Кастомизация виджетов не требует создания кастомных View на каждой платформе. Достаточно переопределить build() и вернуть новый виджет. Пакеты animation (AnimatedContainer, Hero, TweenAnimationBuilder) и gesture (GestureDetector, Dismissible) покрывают 95% сценариев UI-анимации без написания платформенного кода.

Экосистема и пакеты Flutter

pub.dev — официальный реестр пакетов для Dart и Flutter. На июль 2024 года в реестре опубликовано более 45 000 пакетов. Установка пакета выполняется командой flutter pub add <имя_пакета>. Pub автоматически разрешает зависимости, проверяет совместимость версий и генерирует pubspec.lock.

Управление состоянием в Flutter — одна из ключевых архитектурных задач. Помимо flutter_bloc, популярны решения: Provider (рекомендован Google, использует InheritedWidget), Riverpod (переработанная версия Provider с compile-time безопасностью) и GetX (всё-в-одном: состояние, роутинг, DI). Provider остаётся самым простым для старта: ChangeNotifierProvider оборачивает модель, а Consumer перерисовывает виджет при изменении данных.

Тестирование в Flutter поддержано на трёх уровнях. Модульные тесты (flutter test) проверяют функции и классы без UI. Widget-тесты (testWidgets) рендерят отдельные виджеты в изолированной среде. Интеграционные тесты (IntegrationTest) запускают полное приложение на устройстве или симуляторе. Flutter 3.22 добавил поддержку патч-тестов через патч-аналитику и улучшенный отчёт о покрытии кода.

Популярные пакеты

dio — HTTP-клиент с поддержкой интерсепторов, таймаутов и FormData. Используется в 40% Flutter-проектов на GitHub. Dio поддерживает перехват запросов для логирования, ретраев и добавления токенов авторизации. Вторая по популярности библиотека — retrofit, генерирующая типизированные API-клиенты.

flutter_bloc — библиотека управления состоянием на основе BLoC (Business Logic Component) паттерна. BlocProvider передаёт состояния вниз по дереву виджетов, BlocBuilder перерисовывает UI при изменении состояния, а BlocListener выполняет побочные эффекты (навигация, SnackBar). Cubet — упрощённая версия BLoC без событий.

go_router — декларативная навигация для Flutter от Google. Маршруты описываются в GoRouter-конфигурации с поддержкой вложенных маршрутов, редиректов и deep links. ShellRoute разделяет навигацию по вкладкам BottomNavigationBar. GoRouter 14.0 поддерживает type-safe пути и StatefulShellRoute с сохранением состояния вкладок.