Flutter Widgets — co to je, strom widgetů a build

Co jsou Flutter Widgets?

Flutter Widgets — všechny prvky UI v rámci Flutter, implementované jako neměnné (immutable) třídy Dart. Widget je konfigurace prvku UI: jeho velikost, barva, pozice, zpracování událostí. Na rozdíl od Androidu (XML + View) nebo iOS (Storyboard + UIView) Flutter nepoužívá nativní komponenty — vše je kresleno enginem Skia (Android/iOS/Linux) nebo Impeller (iOS/macOS) na Canvas. To zajišťuje identický vzhled na všech platformách bez platformových rozdílů. Flutter je dodáván se dvěma sadami widgetů: Material Widgets (design Google Material Design 3 pro Android/Web) a Cupertino Widgets (design Apple HIG pro iOS/macOS). Vývojář může obě sady kombinovat v jedné aplikaci. Každý widget má metodu build(), která vrací potomka widgetu nebo jejich kompozici — tak se buduje strom widgetů.

Tři stromy Flutter

Flutter pracuje se třemi stromy: Widget Tree (konfigurace, vytvářená vývojářem), Element Tree (přiřazení widgetu k pozici ve stromu, spravované rámcem), Render Tree (objekty, které počítají layout a provádějí paint). Widget vytváří Element, který vytváří RenderObject. Element je znovu použit při změně konfigurace (rebuild) — to je optimalizační mechanismus Flutteru: pokud se typ widgetu a key shodují, Element není znovu vytvořen, pouze je aktualizována nová konfigurace. Pochopení tří stromů je klíčem k optimalizaci výkonu aplikací Flutter.

StatelessWidget: neměnné widgety

StatelessWidget — widget, který neukládá vnitřní stav. Přijímá parametry prostřednictvím konstruktoru a zobrazuje je bez možnosti změny po sestavení. StatelessWidget je ideální pro statické prvky: nadpisy, ikony, avatary, seznamy s pevnými daty. Metoda build() je volána jednou při vytvoření a při změně nadřazeného widgetu. Protože StatelessWidget nemá stav, nevyžaduje samostatný objekt State — build() je definován přímo ve třídě widgetu.

import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  final String name;
  final String avatarUrl;

  const ProfileHeader({super.key, required this.name, required this.avatarUrl});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 24,
          backgroundImage: NetworkImage(avatarUrl),
        ),
        const SizedBox(width: 12),
        Text(
          name,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

ProfileHeader — StatelessWidget přijímající name a avatarUrl prostřednictvím konstruktoru. CircleAvatar zobrazuje avatar, Text zobrazuje jméno. Widget nemůže tyto hodnoty po vytvoření změnit. Použití konstruktoru const (const ProfileHeader) umožňuje Flutteru znovu použít instanci widgetu při rebuildu rodiče — to je mikrooptimalizace doporučená pro všechny StatelessWidgety.

StatefulWidget: widgety se stavem

StatefulWidget — widget s měnitelným stavem, uloženým v samostatném objektu State. Samotný StatefulWidget je neměnný (immutable), stejně jako StatelessWidget. Měnitelná část je vyčleněna do State: State — objekt, který je vytvořen jednou a přežívá vícenásobné rebuildy widgetu. Když se stav změní (setState()), Flutter zavolá build() State a aktualizuje UI. StatefulWidget se používá pro interaktivní prvky: čítače, textová pole, zaškrtávací políčka, animace, časovače.

import 'package:flutter/material.dart';

class LikeButton extends StatefulWidget {
  const LikeButton({super.key});

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  bool liked = false;
  int count = 42;

  void _toggleLike() {
    setState(() {
      liked = !liked;
      count += liked ? 1 : -1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _toggleLike,
      child: Text(liked ? '♥ $count' : '♡ $count'),
    );
  }
}

LikeButton — StatefulWidget s třídou State _LikeButtonState. Pole liked a count jsou stav uložený v State a neresetují se při rebuildu. setState() informuje Flutter o nutnosti přestavby UI. Flutter znovu nevytváří State při každém rebuildu rodiče — pouze při změně konfigurace (key nebo typ widgetu). V IT Sectr používáme StatelessWidget pro zobrazení a StatefulWidget pro interaktivní komponenty, dodržujeme princip minimalizace StatefulWidget na hranice mutace.

Strom widgetů: od Widget k RenderObject

Widget Tree — hierarchická struktura widgetů popisující UI aplikace. Flutter převádí Widget Tree na Element Tree: každý Widget vytváří Element, který sleduje pozici ve stromu a spojení s RenderObject. Render Tree provádí layout (určení velikostí a pozic) a paint (kreslení). Element je klíčová optimalizační vrstva: pokud se typ widgetu a key nezměnily při rebuildu, Element je znovu použit, aktualizuje konfiguraci bez vytváření nového RenderObject. To zajišťuje výkon Flutteru při vysoké snímkové frekvenci (60/120 FPS).

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Widgety')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.flutter_dash, size: 80),
            const SizedBox(height: 16),
            const Text(
              'Ahoj, Flutter!',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

Strom widgetů HomeScreen: Scaffold → AppBar + Center → Column → [Icon, SizedBox, Text]. Scaffold — hlavní layout widget Material Design. Center centruje potomka Column. Column uspořádává potomky vertikálně se zarovnáním na střed (mainAxisAlignment.center). Flutter počítá layout shora dolů (constrainty jsou předávány od rodiče) a velikosti zdola nahoru (sizedByParent nebo sizing from children).

BuildContext: kontext sestavení a přístup ke stromu

BuildContext — deskriptor pozice widgetu v Element Tree. Každá metoda build() obdrží BuildContext, prostřednictvím kterého widget může získat přístup k:MediaQuery (velikost obrazovky, orientace, hustota pixelů, bezpečná zóna), Theme (MaterialThemeData nebo CupertinoThemeData), Navigator (navigační zásobník), ScaffoldMessenger (SnackBar), InheritedWidget (předávání dat dolů stromem). BuildContext by neměl být ukládán po dokončení build() nebo používán mimo synchronní kontext — to vede k chybám jako „Scaffold.of() called with a context that does not contain a Scaffold". Místo ukládání contextu použijte widget Builder nebo vzor InheritedWidget pro přístup k datům.

Key: identifikace widgetu ve stromu

Key — volitelný parametr konstruktoru každého widgetu (super.key). Key pomáhá Flutteru identifikovat widget při změně pořadí/počtu prvků v seznamu. Bez key Flutter porovnává widgety podle typu a pozice; při přidání prvku doprostřed seznamu bez key Flutter znovu použije Element pro nesprávný widget, což způsobuje chyby stavu (StatefulWidget) a animace. Používejte ValueKey (jedinečný identifikátor) pro seznamy, ObjectKey (na základě datového objektu), UniqueKey (zaručeně jedinečný při každém rebuildu — pro vynucené znovuvytvoření).

Katalog widgetů Flutter: Material, Cupertino, Layout

Flutter SDK (stabilní verze 3.3+, Dart 3+) obsahuje 200+ vestavěných widgetů rozdělených do kategorií: Layout (Row, Column, Stack, Container, Expanded, Flexible, Wrap, GridView, ListView, CustomScrollView), Material Design (Scaffold, AppBar, Card, Drawer, BottomNavigationBar, FloatingActionButton, TabBar, Chip, DataTable), Cupertino (CupertinoPageScaffold, CupertinoNavigationBar, CupertinoButton, CupertinoTabBar), Painting & Effects (Opacity, DecoratedBox, ClipRect, Transform, BackdropFilter, ShaderMask), Async (FutureBuilder, StreamBuilder) a Accessibility (Semantics, MergeSemantics, ExcludeSemantics). Layout widgety jsou základem každého Flutter UI: Row pro horizontální sekvence, Column pro vertikální, Stack pro překrývající se prvky, Container s BoxDecoration pro dekoraci.