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 Додаток')),
        body: const Center(
          child: Text('Привіт, 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. Віджет-тести (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). Cubit — спрощена версія BLoC без подій.

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