Flutter v mobilním vývoji: co to je, klíčové pojmy a jak to funguje

Flutter: základy Widget, StatelessWidget a StatefulWidget

Widget — deklarativní popis části UI. Vše ve Flutteru je Widget: od tlačítka po samotnou aplikaci. Widget je konfigurace (ne samotné UI). StatelessWidget — neměnný Widget. build() je volán jednou. Nemá stav. Používá se pro statický obsah. StatefulWidget — měnný Widget. Má objekt State, který se může měnit. setState() — spouští rebuild. State — měnný objekt vázaný na StatefulWidget. Obsahuje data, která se mohou měnit.

StatelessWidget vs StatefulWidget

StatelessWidget — build() je volán jednou. Vhodný pro záhlaví, ikony, statické texty. StatefulWidget — build() je volán pokaždé, když je zavolán setState(). Vhodný pro formuláře, seznamy se změnami, časovače. InheritedWidget — předávání dat dolů bez explicitního předávání přes konstruktory. Theme, MediaQuery, Navigator — InheritedWidgety. BuildContext — pozice Widgetu ve stromu. context.of<T>, context.watch<T>, context.select<T,R> — přístup k InheritedWidgetu.

// Příklad Flutter Widget: StatefulWidget s setState
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — konfigurace. StatelessWidget — neměnný. StatefulWidget — měnný s setState(). IT Sectr doporučuje začít s StatelessWidget a přejít na StatefulWidget pouze když je potřeba stav.

Stromy (Widget Tree, Element Tree, RenderObject Tree)

Flutter používá tři stromy pro efektivní vykreslování. Widget Tree — konfigurační strom. Widgety jsou vytvářeny často (každý build), lehké. Element Tree — strom prvků. Jeden prvek na Widget (pokud se typ nezmění). Element — most mezi Widgetem a RenderObjectem. RenderObject Tree — vykreslovací strom. Zpracovává velikosti, pozice, kreslení. RenderObject — těžký, vytváří se zřídka. Flutter porovnává Widget Tree a aktualizuje Element Tree, což spouští aktualizaci RenderObject Tree.

Keys a Element Tree

Key — identifikátor Widgetu v Element Tree. ValueKey, ObjectKey, UniqueKey, PageStorageKey. Keys umožňují Flutteru přiřazovat staré a nové Widgety během rebuildu. Bez Keys Flutter přiřazuje podle typu Widgetu a pozice. GlobalKey — přístup k State z jiného Widgetu. Používá se pro: složité formuláře, animace, přístup k State v testech. IT Sectr doporučuje používat Keys pro seznamy (List.generate) a vyhýbat se GlobalKey, pokud to není nutné.

Expanded — Widget vyplňující dostupné místo v Row/Column/Flex. Flexible — nenutí k vyplnění (může být menší). MediaQuery — InheritedWidget s informacemi o zařízení: velikost obrazovky, orientace, platforma, faktor měřítka textu. Theme/ThemeData — centralizované téma. Theme.of(context) — přístup. MaterialApp — kořenový Widget pro konfiguraci směrování, témat, lokalizace. Scaffold — základní rozvržení s AppBar, Drawer, BottomNavigationBar. AppBar — horní panel.

Navigace (Navigator, Route)

Navigator — zásobník tras (Routes). Navigator.push — otevřít obrazovku (vrací Future). Navigator.pop — zavřít (s výsledkem). MaterialPageRoute — animovaný přechod (posun zprava). Named Routes — řetězcové identifikátory. onGenerateRoute — centralizovaný handler. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — deklarativní navigace pro web, deep linking a složité scénáře.

Navigator 2.0

Navigator 2.0 — deklarativní navigace. Router — centrální Widget. RouteInformationParser — parsování URL. RouterDelegate — správa zásobníku. GoRouter (balíček) — zjednodušený obal nad Navigator 2.0. Podporuje: pojmenované trasy, parametry, přesměrování, deep linking. IT Sectr doporučuje GoRouter pro většinu projektů a Navigator 2.0 pouze pro složité scénáře (web, desktop).

Asynchronnost (FutureBuilder, StreamBuilder)

FutureBuilder — Widget, který staví UI na základě Future. connectionState: none, waiting, active, done. Používá se pro: HTTP požadavky, čtení DB, časovače. StreamBuilder — Widget pro Stream (nekonečný tok dat). snapshot.data, snapshot.hasError, snapshot.hasData. Používá se pro: WebSocket, Firebase, aktualizace polohy. Oba Widgety se přestavují při přijetí nových dat.

Správa stavu

Provider — jednoduché DI + správa stavu. ChangeNotifierProvider, MultiProvider. Riverpod — moderní náhrada Provideru: bezpečné při kompilaci, nezávislé na BuildContext. Bloc — architektura Event-Driven: Cubit (jednoduché události) vs Bloc (složité). GetX — lehká správa stavu + DI + směrování. setState — nejjednodušší, pro lokální stav. IT Sectr doporučuje Riverpod pro nové projekty a Provider pro stávající.

Témata a přizpůsobení (MediaQuery, ThemeData)

MediaQuery — velikost obrazovky, orientace, platforma, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — téma aplikace: barvy, písma, tvary. Theme.of(context).textTheme.bodyLarge. Hot Reload — injektáž kódu do běžící aplikace. Zachovává stav. Nepodporuje: změnu main(), globální proměnné, statická pole. Hot Restart — úplný restart aplikace (ztráta stavu). Hot Reload — hlavní výhoda Flutteru pro vývojáře.

StatelessWidget — pro statický obsah. StatefulWidget — pro dynamický obsah. InheritedWidget — pro DI. IT Sectr doporučuje standardně StatelessWidget a StatefulWidget pouze v případě potřeby.

Responzivní rozvržení

LayoutBuilder — přizpůsobení rozměrům rodiče. OrientationBuilder — přizpůsobení orientaci. Expanded vs Flexible — distribuce místa v Row/Column. MediaQuery — body zlomu pro tablety a desktopy. SafeArea — okraje od systémových prvků (notch, stavový řádek). AspectRatio — zachování proporcí. IT Sectr doporučuje LayoutBuilder pro adaptivní rozvržení a OrientationBuilder pro krajinářskou orientaci.

Testování (Widget, Integration, Unit)

Unit testy — testování obchodní logiky, repozitářů, modelů. dart test — spuštění. Widget testy — testování widgetů izolovaně. WidgetTester — pumpWidget, tap, enterText. Integrační testy — úplné scénáře na reálném zařízení/emulátoru. Mockito — mockování závislostí. Golden testy — porovnání snímků obrazovky (golden soubory). IT Sectr doporučuje Widget testy pro každou obrazovku a Unit testy pro obchodní logiku.

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

Animace (Implicitní, Explicitní, Hero)

Implicitní animace — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Změny vlastností se animují automaticky. Explicitní animace — AnimationController s Tween. forward() / reverse(). Hero animace — Hero Widget s tagem — přechodová animace mezi obrazovkami. Postupná animace — řetězec animací s Interval. Lottie — integrace After Effects animací. Rive — interaktivní animace (state machine). IT Sectr doporučuje AnimatedContainer pro 80% případů a AnimationController pro složité scénáře.

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

Síť (http, dio, graphql)

http — jednoduchý HTTP klient (get, post, put, delete). dio — pokročilý klient s interceptory, timeoouty, opakováním, logováním. graphql_flutter — GraphQL klient pro Flutter. json_serializable — generování fromJson/toJson pomocí anotací. Retrofit Dart — type-safe HTTP klient jako Retrofit. WebSocket — přes web_socket_channel. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. IT Sectr doporučuje dio pro REST API a graphql_flutter pro GraphQL.

Flutter DevTools — sada nástrojů: Inspector (strom widgetů), Timeline (výkon), Memory, Network, Logging. Profile mode — profilování bez ladění. Performance overlay — FPS, časy buildů. Flame chart — sledování plamenového grafu. DevTools — nezbytný nástroj pro optimalizaci Flutter aplikací v produkci.

Flutter Web — kompilace Flutteru do WASM (WebAssembly). CanvasKit (Skia) vs HTML renderer. CanvasKit — pixel-perfect, ale těžší. HTML renderer — lehký, ale s omezeními. WASM (Flutter 3.22+) — nativní výkon. Responzivní přizpůsobení přes LayoutBuilder a MediaQuery. IT Sectr doporučuje CanvasKit pro desktopové webové aplikace a HTML renderer pro obsahové weby.