Flutter — kluczowe pojęcia, architektura i widżety

Czym jest Flutter

Flutter to SDK (Software Development Kit) i framework do tworzenia interfejsów użytkownika, ogłoszony przez Google w 2015 roku. Pierwsza stabilna wersja Flutter 1.0 została wydana w grudniu 2018 roku. W przeciwieństwie do React Native, Flutter nie używa mostu między JavaScript a kodem natywnym — kompiluje się bezpośrednio do natywnych instrukcji procesora.

Kluczową cechą Flutter jest własny silnik renderowania. Framework nie polega na UIKit (iOS) ani systemie View Androida. Zamiast tego Flutter rysuje każdy piksel samodzielnie poprzez Skia (do 2024 roku) lub nowy silnik Impeller. Gwarantuje to identyczny wygląd aplikacji na wszystkich platformach i eliminuje problemy z adaptacją do różnych wersji systemów operacyjnych.

Według danych Statista 2024, Flutter zajmuje pierwsze miejsce wśród frameworków wieloplatformowych pod względem popularności: około 46% programistów używa go do tworzenia aplikacji mobilnych. Framework jest wykorzystywany w projektach Google Pay, Alibaba, eBay, BMW i Tencent.

Historia i wersje Flutter

Pierwsza wersja alfa Flutter została zaprezentowana na Dart Developer Summit w 2015 roku pod nazwą Sky. W 2018 roku wydano Flutter 1.0 z obsługą tylko iOS i Android. Flutter 2.0 (2021) dodał Web i Desktop. Flutter 3.0 (2022) wprowadził stabilną obsługę macOS i Linux. Flutter 3.16 (2023) przedstawił Impeller — nowy silnik renderowania oparty na Metal i Vulkan.

Wersja Flutter 3.22 (2024) zawiera Impeller domyślnie na iOS, ulepszoną obsługę Material Design 3, Dart 3.4 z rozszerzeniami makr i wbudowaną obsługę Native Assets do bezpośredniego dostępu do zasobów platformy. Google informuje, że Impeller redukuje opuszczanie klatek (jank) o 90% w porównaniu do Skia.

Język Dart

Dart to język programowania stworzony przez Google w 2011 roku i używany w Flutter. Dart łączy ścisłe typowanie z możliwościami kompilacji JIT (dla Hot Reload) i AOT (dla wersji produkcyjnych). Wersja Dart 3.0 (2023) wprowadziła pattern matching, sealed class i records jako stabilne funkcje.

Null safety w Dart — obowiązkowa funkcja wprowadzona od wersji 2.12. Kompilator sprawdza wszystkie typy nullable na etapie budowania, eliminując NullPointerException w czasie wykonania. Typy danych (int, String, bool) domyślnie są non-nullable, a dla wartości nullable używa się sufiksu ? (np. String? name).

Architektura Flutter

Architektura Flutter jest zbudowana na zasadzie trzech warstw. Dolna warstwa — silnik (C/C++), odpowiedzialny za renderowanie, wejście/wyjście i dostęp do API platformy. Środkowa warstwa — framework (Dart), implementujący system widżetów, gestów, animacji i nawigacji. Górna warstwa — aplikacja (Dart), która składa widżety w drzewo.

Widżety i drzewo widżetów

W Flutter wszystko jest widżetem. Widżety są dwóch typów: StatelessWidget (niezmienny, nie przechowuje stanu) i StatefulWidget (zmienny, zarządza stanem przez State). Drzewo widżetów (Widget Tree) to hierarchiczna struktura, gdzie każdy widżet potomny jest zagnieżdżony w rodzicu. Scaffold, AppBar, Container, Text, Column, Row — podstawowe elementy budulcowe.

BuildContext to obiekt, który przekazuje pozycję widżetu w drzewie. MediaQuery.of(context) pobiera rozmiary ekranu, Theme.of(context) — bieżący motyw. BuildContext jest używany do nawigacji (Navigator.of(context)), dostępu do InheritedWidget i tłumaczenia locale przez Localizations.of.

Silnik Impeller

Impeller to nowoczesny silnik renderowania Flutter, napisany w C++ i używający Metal (iOS/macOS) oraz Vulkan (Android). W przeciwieństwie do Skia, który przerysowywał każdą klatkę od zera, Impeller kompiluje shadery z wyprzedzeniem i przechowuje je w pamięci podręcznej. Eliminuje to opóźnienia przy pierwszym renderowaniu złożonych scen i zmniejsza obciążenie GPU.

Testy Google Flutter Team pokazują, że Impeller skraca czas kompilacji shaderów z 200–500 ms (Skia) do 1–3 ms. Na iPhone 13 Pro renderowanie Impeller osiąga 120 FPS bez opuszczania klatek. Na Androidzie z Vulkan stabilne 60 FPS nawet na urządzeniach średniej półki (Xiaomi Redmi Note 12).

Przykładowa aplikacja we 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('Aplikacja Flutter')),
        body: const Center(
          child: Text('Witaj, Flutter!'),
        ),
      ),
    );
  }
}

Zalety Flutter

Jedna baza kodu — główna zaleta Flutter. Jeden projekt w Dart kompiluje się pod iOS, Android, Web, Windows, macOS i Linux. Według szacunków Google, skraca to czas programowania o 30–50% w porównaniu do osobnych projektów iOS i Android. Alibaba skróciła czas wydawania wersji o 30% po przejściu na Flutter.

Wydajność Flutter jest bliska natywnej. Kompilacja AOT Dart do kodu maszynowego ARM i x86_64 eliminuje opóźnienia interpretacji. Silnik Impeller gwarantuje 60 FPS nawet na urządzeniach z 2018 roku (iPhone XR, Samsung Galaxy S9). Według Google, 99.5% klatek w aplikacjach Flutter jest renderowanych bez opuszczania.

Hot Reload — technologia błyskawicznej aktualizacji kodu. Programista zmienia kod źródłowy, zapisuje plik, a Flutter przebudowuje drzewo widżetów w 300–800 ms bez utraty bieżącego stanu aplikacji. Przyspiesza to iteracje UI: można zmieniać marginesy, kolory i animacje w sekundy, nie czekając na pełną przebudowę.

Material Design 3 i własny język projektowania Cupertino (styl iOS) są dołączone do standardowej instalacji Flutter. Widżety Material 3 obsługują dynamiczne kolory (Material You), responsywny układ i animacje przejść między ekranami. CupertinoPageTransition i CupertinoNavigationBar odwzorowują zachowanie natywnego nawigatora iOS.

Dostosowywanie widżetów nie wymaga tworzenia niestandardowych View na każdej platformie. Wystarczy nadpisać build() i zwrócić nowy widżet. Pakiety animation (AnimatedContainer, Hero, TweenAnimationBuilder) i gesture (GestureDetector, Dismissible) pokrywają 95% scenariuszy animacji UI bez pisania kodu platformowego.

Ekosystem i pakiety Flutter

pub.dev — oficjalny rejestr pakietów dla Dart i Flutter. Na lipiec 2024 roku w rejestrze opublikowano ponad 45 000 pakietów. Instalacja pakietu wykonuje się poleceniem flutter pub add . Pub automatycznie rozwiązuje zależności, sprawdza zgodność wersji i generuje pubspec.lock.

Zarządzanie stanem we Flutter — jedno z kluczowych zadań architektonicznych. Oprócz flutter_bloc, popularne są rozwiązania: Provider (rekomendowany przez Google, używa InheritedWidget), Riverpod (przepracowana wersja Provider z bezpieczeństwem na etapie kompilacji) i GetX (wszystko-w-jednym: stan, routing, DI). Provider pozostaje najprostszy do rozpoczęcia: ChangeNotifierProvider opakowuje model, a Consumer przerysowuje widżet przy zmianie danych.

Testowanie we Flutter jest wspierane na trzech poziomach. Testy jednostkowe (flutter test) sprawdzają funkcje i klasy bez UI. Testy widżetów (testWidgets) renderują poszczególne widżety w izolowanym środowisku. Testy integracyjne (IntegrationTest) uruchamiają pełną aplikację na urządzeniu lub symulatorze. Flutter 3.22 dodał obsługę testów łat (patch tests) poprzez analizę łat i ulepszony raport pokrycia kodu.

Popularne pakiety

dio — klient HTTP z obsługą interceptora, timeoutów i FormData. Używany w 40% projektów Flutter na GitHub. Dio obsługuje przechwytywanie żądań do logowania, ponawiania i dodawania tokenów autoryzacji. Drugą najpopularniejszą biblioteką jest retrofit, generująca typowane klienty API.

flutter_bloc — biblioteka zarządzania stanem oparta na wzorcu BLoC (Business Logic Component). BlocProvider przekazuje stany w dół drzewa widżetów, BlocBuilder przerysowuje UI przy zmianie stanu, a BlocListener wykonuje efekty uboczne (nawigacja, SnackBar). Cubet — uproszczona wersja BLoC bez zdarzeń.

go_router — deklaratywna nawigacja dla Flutter od Google. Trasy opisuje się w konfiguracji GoRouter z obsługą zagnieżdżonych tras, przekierowań i deep linków. ShellRoute dzieli nawigację na zakładki BottomNavigationBar. GoRouter 14.0 obsługuje type-safe ścieżki i StatefulShellRoute z zachowaniem stanu zakładek.