Flutter — klíčové pojmy, architektura a widgety

Co je Flutter

Flutter je SDK (Software Development Kit) a framework pro vytváření uživatelských rozhraní, oznámený společností Google v roce 2015. První stabilní verze Flutter 1.0 byla vydána v prosinci 2018. Na rozdíl od React Native Flutter nepoužívá most mezi JavaScriptem a nativním kódem — kompiluje se přímo do nativních instrukcí procesoru.

Klíčovou vlastností Flutter je vlastní renderovací engine. Framework nespoléhá na UIKit (iOS) nebo View systém Androidu. Místo toho Flutter vykresluje každý pixel samostatně prostřednictvím Skia (do roku 2024) nebo nového enginu Impeller. To zaručuje jednotný vzhled aplikace na všech platformách a odstraňuje problémy s přizpůsobením různým verzím OS.

Podle údajů Statista 2024 zaujímá Flutter první místo mezi multiplatformními frameworky v popularitě: přibližně 46 % vývojářů jej používá pro mobilní vývoj. Framework se používá v projektech Google Pay, Alibaba, eBay, BMW a Tencent.

Historie a verze Flutter

První alfa verze Flutter byla představena na Dart Developer Summit v roce 2015 pod názvem Sky. V roce 2018 byl vydán Flutter 1.0 s podporou pouze iOS a Android. Flutter 2.0 (2021) přidal Web a Desktop. Flutter 3.0 (2022) zavedl stabilní podporu pro macOS a Linux. Flutter 3.16 (2023) představil Impeller — nový renderovací engine založený na Metal a Vulkan.

Verze Flutter 3.22 (2024) obsahuje Impeller ve výchozím nastavení na iOS, vylepšenou podporu Material Design 3, Dart 3.4 s rozšířeními maker a vestavěnou podporu Native Assets pro přímý přístup k prostředkům platformy. Google uvádí, že Impeller snižuje vynechávání snímků (jank) o 90 % ve srovnání se Skiou.

Jazyk Dart

Dart je programovací jazyk vytvořený společností Google v roce 2011 a používaný ve Flutter. Dart kombinuje přísnou typovou kontrolu s možnostmi JIT kompilace (pro Hot Reload) a AOT kompilace (pro produkční sestavení). Verze Dart 3.0 (2023) zavedla pattern matching, sealed class a records jako stabilní funkce.

Null safety v Dartu — povinná funkce zavedená od verze 2.12. Kompilátor kontroluje všechny nullable typy ve fázi sestavení, čímž eliminuje NullPointerException za běhu. Datové typy (int, String, bool) jsou ve výchozím nastavení non-nullable a pro nullable hodnoty se používá přípona ? (např. String? name).

Architektura Flutter

Architektura Flutter je postavena na třívrstvém principu. Spodní vrstva — engine (C/C++), zodpovědný za renderování, vstup/výstup a přístup k API platformy. Střední vrstva — framework (Dart), implementující systém widgetů, gest, animací a navigace. Horní vrstva — aplikace (Dart), která skládá widgety do stromu.

Widgety a strom widgetů

Ve Flutter je vše widget. Widgety jsou dvou typů: StatelessWidget (neměnný, neuchovává stav) a StatefulWidget (proměnný, spravuje stav prostřednictvím State). Strom widgetů (Widget Tree) je hierarchická struktura, kde každý potomkovský widget je vnořen do rodičovského. Scaffold, AppBar, Container, Text, Column, Row — základní stavební bloky.

BuildContext je objekt, který předává pozici widgetu ve stromu. MediaQuery.of(context) získává rozměry obrazovky, Theme.of(context) — aktuální téma. BuildContext se používá pro navigaci (Navigator.of(context)), přístup k InheritedWidget a překlad locale prostřednictvím Localizations.of.

Engine Impeller

Impeller je moderní renderovací engine Flutter, napsaný v C++ a používající Metal (iOS/macOS) a Vulkan (Android). Na rozdíl od Skia, která překreslovala každý snímek od začátku, Impeller kompiluje shadery předem a ukládá je do mezipaměti. To odstraňuje zpoždění při prvním vykreslování složitých scén a snižuje zatížení GPU.

Testy Google Flutter Team ukazují, že Impeller snižuje dobu kompilace shaderů z 200–500 ms (Skia) na 1–3 ms. Na iPhone 13 Pro dosahuje renderování Impeller 120 FPS bez vynechávání snímků. Na Androidu s Vulkanem stabilních 60 FPS i na zařízeních střední třídy (Xiaomi Redmi Note 12).

Příklad aplikace ve 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('Aplikace Flutter')),
        body: const Center(
          child: Text('Ahoj, Flutter!'),
        ),
      ),
    );
  }
}

Výhody Flutter

Jednotná kódová základna — hlavní výhoda Flutter. Jeden projekt v Dartu se kompiluje pro iOS, Android, Web, Windows, macOS a Linux. Podle odhadů Google to snižuje dobu vývoje o 30–50 % ve srovnání se samostatnými projekty pro iOS a Android. Alibaba zkrátila dobu vydávání verzí o 30 % po přechodu na Flutter.

Výkon Flutter se blíží nativnímu. AOT kompilace Dartu do strojového kódu ARM a x86_64 eliminuje zpoždění interpretace. Engine Impeller zaručuje 60 FPS i na zařízeních z roku 2018 (iPhone XR, Samsung Galaxy S9). Podle Google je 99,5 % snímků v aplikacích Flutter vykresleno bez ztráty.

Hot Reload — technologie okamžité aktualizace kódu. Vývojář změní zdrojový kód, uloží soubor a Flutter přestaví strom widgetů za 300–800 ms bez ztráty aktuálního stavu aplikace. To urychluje iterace UI designu: okraje, barvy a animace lze měnit během sekund bez čekání na úplné přestavení.

Material Design 3 a vlastní designový jazyk Cupertino (styl iOS) jsou součástí standardního balíčku Flutter. Widgety Material 3 podporují dynamické barvy (Material You), adaptivní rozvržení a přechodové animace mezi obrazovkami. CupertinoPageTransition a CupertinoNavigationBar napodobují chování nativního navigátoru iOS.

Přizpůsobení widgetů nevyžaduje vytváření vlastních View na každé platformě. Stačí přepsat build() a vrátit nový widget. Balíčky animation (AnimatedContainer, Hero, TweenAnimationBuilder) a gesture (GestureDetector, Dismissible) pokrývají 95 % scénářů UI animací bez psaní kódu platformy.

Ekosystém a balíčky Flutter

pub.dev — oficiální registr balíčků pro Dart a Flutter. K červenci 2024 bylo v registru publikováno více než 45 000 balíčků. Instalace balíčku se provádí příkazem flutter pub add . Pub automaticky řeší závislosti, kontroluje kompatibilitu verzí a generuje pubspec.lock.

Správa stavu ve Flutter — jeden z klíčových architektonických úkolů. Kromě flutter_bloc jsou populární řešení: Provider (doporučený Google, používá InheritedWidget), Riverpod (přepracovaná verze Provider s bezpečností při kompilaci) a GetX (vše-v-jednom: stav, směrování, DI). Provider zůstává nejjednodušší pro začátek: ChangeNotifierProvider obaluje model a Consumer překreslí widget při změně dat.

Testování ve Flutter je podporováno na třech úrovních. Unit testy (flutter test) kontrolují funkce a třídy bez UI. Widget testy (testWidgets) vykreslují jednotlivé widgety v izolovaném prostředí. Integrační testy (IntegrationTest) spouštějí celou aplikaci na zařízení nebo simulátoru. Flutter 3.22 přidal podporu pro patch testy prostřednictvím patch analýzy a vylepšené zprávy o pokrytí kódu.

Populární balíčky

dio — HTTP klient s podporou interceptorů, timeoutů a FormData. Používá se ve 40 % Flutter projektů na GitHubu. Dio podporuje zachycování požadavků pro protokolování, opakování a přidávání autorizačních tokenů. Druhou nejoblíbenější knihovnou je retrofit, která generuje typované API klienty.

flutter_bloc — knihovna pro správu stavu založená na vzoru BLoC (Business Logic Component). BlocProvider předává stavy dolů stromem widgetů, BlocBuilder překresluje UI při změně stavu a BlocListener provádí vedlejší účinky (navigace, SnackBar). Cubet — zjednodušená verze BLoC bez událostí.

go_router — deklarativní navigace pro Flutter od Google. Cesty jsou popsány v konfiguraci GoRouter s podporou vnořených cest, přesměrování a deep linků. ShellRoute rozděluje navigaci na karty BottomNavigationBar. GoRouter 14.0 podporuje type-safe cesty a StatefulShellRoute s uchováním stavu karet.