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

Какво е Flutter

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

Ключовата характеристика на 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 ms (Skia) до 1–3 ms. На 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 е близка до native. AOT компилацията на Dart до машинен код за ARM и x86_64 елиминира закъсненията при интерпретация. Двигателят Impeller гарантира 60 FPS дори на устройства от 2018 г. (iPhone XR, Samsung Galaxy S9). Според Google, 99.5% от кадрите в приложенията на Flutter се рендерират без загуба.

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

Material Design 3 и собственият дизайнерски език Cupertino (стил iOS) са включени в стандартния пакет на Flutter. Уиджетите на Material 3 поддържат динамични цветове (Material You), адаптивно оформление и анимация на преход между екрани. CupertinoPageTransition и CupertinoNavigationBar имитират поведението на native 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 с безопасност по време на компилация) и 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). Cubet — опростена версия на BLoC без събития.

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