Scaffold: co to je, struktura a widgety Flutter

Co je Scaffold ve Flutter

Scaffold — je widget-kompozitor z knihovny Material Design, který tvoří základní vizuální strukturu obrazovky. Implementuje standardní vzor Material aplikace: horní panel, tělo obrazovky, postranní nabídku a plovoucí tlačítka. Na rozdíl od Container, který pouze nastavuje rozměry a styl, Scaffold spravuje celou obrazovku jako jediný systém.

Každá Flutter aplikace postavená podle Material Design začíná MaterialApp, uvnitř které je každá obrazovka zabalena do Scaffold. Právě Scaffold zajišťuje správné zobrazení AppBar na všech zařízeních, s ohledem na SafeArea pro iPhone X a novější. Také zodpovídá za z-pořadí: Drawer se zobrazuje nad body a SnackBar — nad celým rozhraním, ale pod dialogovými okny.

Podle oficiální Flutter API Reference (2026) je Scaffold povinnou podmínkou pro správnou funkci widgetů jako SnackBar, BottomSheet a PersistentBottomSheet. Bez Scaffold tyto komponenty vyhazují výjimku, protože závisí na InheritedWidget Scaffold.of pro přístup ke kontextu Scaffold. Proto je umístění jakéhokoli obsahu přímo do Container místo Scaffold častou chybou začínajících vývojářů, což vede ke ztrátě funkcionality Material.

Scaffold v hierarchii widgetů

V typické Flutter aplikaci se Scaffold nachází uvnitř MaterialApp, obvykle pod WidgetsApp nebo CupertinoApp při cross-platform vývoji. MaterialApp vytváří Navigator a téma, a Scaffold určuje strukturu aktuální obrazovky. Každá obrazovka může mít vlastní Scaffold s jedinečným AppBar, Drawer a BottomNavigationBar, což umožňuje flexibilní přizpůsobení rozhraní pro konkrétní stránku.

Pro hlubokou customizaci lze Scaffold kombinovat s NestedScrollView — to umožňuje implementaci komplexních efektů posouvání, například mizejícího AppBar s paralaxním efektem. Nicméně ve většině případů standardní Scaffold se svými vlastnostmi stačí pro vybudování produkčně připravené obrazovky.

Struktura Scaffold: klíčové části kostry

Scaffold se skládá z několika povinných a volitelných zón, z nichž každá je zodpovědná za určitou část rozhraní. Podívejme se na každou část zvlášť, abychom pochopili, jak vzájemně interagují.

AppBar — horní panel

AppBar — horní panel obrazovky, který zobrazuje název, navigační tlačítko a akce. Automaticky získává správnou výšku 56dp a bere v úvahu SafeArea pro zařízení s výřezem. Do AppBar lze vložit TabBar pro přepínání karet pomocí vlastnosti bottom.

Drawer — postranní nabídka

Drawer — panel vysouvající se zleva a poskytující navigaci sekcemi aplikace. Scaffold automaticky přidá ikonu hamburgeru do AppBar, pokud je vlastnost drawer nastavena. Drawer může obsahovat DrawerHeader, ListView s položkami nabídky a uživatelské informace.

BottomNavigationBar — dolní navigace

BottomNavigationBar — panel v dolní části obrazovky pro přepínání mezi hlavními sekcemi. Obsahuje 2 až 5 ikon s popisky a podporuje Material 3 s aktivní indikací prostřednictvím NavigationBar. Scaffold jej umístí do spodní části obrazovky, automaticky posune body výše, aby obsah nebyl zakryt.

FloatingActionButton — plovoucí tlačítko

FloatingActionButton — kulaté tlačítko umístěné v pravém dolním rohu obrazovky. Používá se pro hlavní akci na obrazovce, například přidání nového záznamu nebo odeslání zprávy. Scaffold podporuje více FAB s rozšířenou animací prostřednictvím extended vlastností.

Body — hlavní obsah

Body — centrální oblast obrazovky, do které se umisťuje hlavní obsah. Jako body může být jakýkoli widget: Column, ListView, GridView, Stack nebo vlastní kompozice. Scaffold automaticky vypočítá výšku body s ohledem na AppBar, BottomNavigationBar a SafeArea, což eliminuje potřebu ručního nastavování rozměrů.

Hlavní vlastnosti Scaffold

Scaffold poskytuje přes 30 vlastností pro konfiguraci vzhledu a chování obrazovky. Mezi nimi jsou jak povinné (body), tak volitelné vlastnosti, které spravují mezery, pozadí a stav klávesnice. Pochopení každé vlastnosti pomáhá přesně naladit rozhraní podle požadavků designu.

Vlastnost resizeToAvoidBottomInset je zvláště důležitá při práci s formuláři: když je nastavena na true (výchozí), Scaffold automaticky stlačí body při objevení klávesnice, aby vstupní pole zůstalo viditelné. To eliminuje potřebu psát vlastní posluchače klávesnice. Pro vlastní scénáře s SingleChildScrollView lze vlastnost vypnout.

Příklad použití Scaffold v aplikaci

Podívejme se na praktický příklad Scaffold s plnou sadou Material komponent. Kód vytváří obrazovku s AppBar, Drawer, BottomNavigationBar, FloatingActionButton a SnackBar — typickou strukturu mobilní aplikace ve Flutter.

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Moje Aplikace'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('Menu')),
            ListTile(title: const Text('Nastavení'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Akce dokončena')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

V příkladu je použit NavigationBar z Material 3 místo zastaralého BottomNavigationBar. Scaffold automaticky propojuje všechny části: při otevření Drawer je SnackBar skryt, při přepínání karet se body aktualizuje a FloatingActionButton zůstává na svém místě. ScaffoldMessenger garantuje zobrazení SnackBar i při více Scaffold v hierarchii.

Scaffold a Material 3: vlastnosti konfigurace

Material 3 (M3) — je evoluce Material Design, představená Googlem v roce 2023. Scaffold v M3 obdržel řadu změn: nový widget NavigationBar místo BottomNavigationBar, podporu Dynamic Color prostřednictvím ColorScheme.fromSeed a aktualizovaná doporučení pro mezery a výšky komponent. Přechod na M3 nevyžaduje výměnu Scaffold — stačí aktualizovat téma aplikace.

Pro aktivaci Material 3 v projektu je třeba nastavit useMaterial3: true v ThemeData. Scaffold automaticky přizpůsobí vizuální vzhled: mezery se zvětší (24dp místo 16dp), barvy se přepočítají z seed barvy a FloatingActionButton získá větší rozměry se zaoblenými rohy. Všechny stávající vlastnosti Scaffold přitom zůstávají funkční.

Podle Material Design 3 Specification (2026) se doporučuje používat NavigationBar se třemi až pěti položkami místo BottomNavigationBar. Scaffold podporuje obě varianty, ale NavigationBar poskytuje lepší podporu pro adaptabilitu a Material You na zařízeních Pixel.

Konfigurace Scaffold pro Material 3

Pro správnou funkci Scaffold s M3 stačí aktualizovat téma a nahradit BottomNavigationBar za NavigationBar. Barvy budou automaticky vypočítány pomocí ColorScheme.fromSeed a Scaffold přizpůsobí mezery novým standardům. V případě potřeby lze přímo přepsat backgroundColor.