Scaffold: co to jest, struktura i widżety Flutter

Czym jest Scaffold we Flutter

Scaffold — to widget-kompozytor z biblioteki Material Design, który tworzy podstawową wizualną strukturę ekranu. Implementuje standardowy wzorzec aplikacji Material: górny panel, treść ekranu, menu boczne i pływające przyciski. W przeciwieństwie do Container, który po prostu ustawia rozmiary i styl, Scaffold zarządza całym ekranem jako jednolitym systemem.

Każda aplikacja Flutter zbudowana według Material Design zaczyna się od MaterialApp, wewnątrz którego każdy ekran jest opakowany w Scaffold. To właśnie Scaffold zapewnia prawidłowe wyświetlanie AppBar na wszystkich urządzeniach, uwzględniając SafeArea dla iPhone X i nowszych. Odpowiada również za porządek Z: Drawer wyświetla się nad body, a SnackBar — nad całym interfejsem, ale poniżej okien dialogowych.

Według oficjalnego Flutter API Reference (2026), Scaffold jest warunkiem koniecznym do poprawnego działania takich widgetów jak SnackBar, BottomSheet i PersistentBottomSheet. Bez Scaffold komponenty te wyrzucają wyjątek, ponieważ zależą od InheritedWidget Scaffold.of w celu dostępu do kontekstu Scaffold. Dlatego umieszczanie dowolnej treści bezpośrednio w Container zamiast Scaffold to częsty błąd początkujących programistów, prowadzący do utraty funkcjonalności Material.

Scaffold w hierarchii widgetów

W typowej aplikacji Flutter Scaffold znajduje się wewnątrz MaterialApp, zwykle pod WidgetsApp lub CupertinoApp przy rozwoju cross-platformowym. MaterialApp tworzy Navigator i motyw, a Scaffold określa strukturę bieżącego ekranu. Każdy ekran może mieć własny Scaffold z unikalnymi AppBar, Drawer i BottomNavigationBar, co pozwala elastycznie dostosowywać interfejs do konkretnej strony.

Do głębokiej personalizacji Scaffold można łączyć z NestedScrollView — umożliwia to implementację złożonych efektów przewijania, na przykład znikającego AppBar z efektem paralaksy. Jednak w większości przypadków standardowy Scaffold z jego właściwościami wystarcza do zbudowania produkcyjnego ekranu.

Struktura Scaffold: kluczowe części szkieletu

Scaffold składa się z kilku obowiązkowych i opcjonalnych stref, z których każda odpowiada za określoną część interfejsu. Przyjrzyjmy się każdej części osobno, aby zrozumieć, jak współdziałają ze sobą.

AppBar — górny panel

AppBar — to górny panel ekranu, który wyświetla tytuł, przycisk nawigacji i akcje. Automatycznie uzyskuje prawidłową wysokość 56dp i uwzględnia SafeArea dla urządzeń z notchem. W AppBar można wbudować TabBar do przełączania zakładek za pomocą właściwości bottom.

Drawer — menu boczne

Drawer — to panel wysuwający się z lewej strony i zapewniający nawigację po sekcjach aplikacji. Scaffold automatycznie dodaje ikonę hamburgera w AppBar, jeśli właściwość drawer jest ustawiona. Drawer może zawierać DrawerHeader, ListView z pozycjami menu i informacje o użytkowniku.

BottomNavigationBar — nawigacja dolna

BottomNavigationBar — to panel w dolnej części ekranu do przełączania między głównymi sekcjami. Zawiera od 2 do 5 ikon z etykietami i obsługuje Material 3 z aktywną indykacją przez NavigationBar. Scaffold pozycjonuje go na dole ekranu, automatycznie przesuwając body wyżej, aby treść nie była zasłaniana.

FloatingActionButton — pływający przycisk

FloatingActionButton — to okrągły przycisk umieszczany w prawym dolnym rogu ekranu. Służy do głównej akcji na ekranie, na przykład dodawania nowego wpisu lub wysyłania wiadomości. Scaffold obsługuje wiele FAB z rozszerzoną animacją przez właściwości extended.

Body — główna zawartość

Body — to centralny obszar ekranu, w którym umieszczana jest główna treść. Jako body może występować dowolny widget: Column, ListView, GridView, Stack lub niestandardowa kompozycja. Scaffold automatycznie oblicza wysokość body uwzględniając AppBar, BottomNavigationBar i SafeArea, co eliminuje ręczne dopasowywanie rozmiarów.

Główne właściwości Scaffold

Scaffold zapewnia ponad 30 właściwości do konfiguracji wyglądu i zachowania ekranu. Wśród nich są zarówno obowiązkowe (body), jak i opcjonalne, zarządzające odstępami, tłem i stanem klawiatury. Zrozumienie każdej właściwości pomaga precyzyjnie dostroić interfejs do wymagań projektu.

Właściwość resizeToAvoidBottomInset jest szczególnie ważna przy pracy z formularzami: gdy jest ustawiona na true (domyślnie), Scaffold automatycznie ściska body po pojawieniu się klawiatury, aby pole wprowadzania pozostało widoczne. Eliminuje to potrzebę pisania niestandardowych nasłuchiwaczy klawiatury. Dla niestandardowych scenariuszy z SingleChildScrollView właściwość można wyłączyć.

Przykład użycia Scaffold w aplikacji

Rozważmy praktyczny przykład Scaffold z pełnym zestawem komponentów Material. Kod tworzy ekran z AppBar, Drawer, BottomNavigationBar, FloatingActionButton i SnackBar — typowa struktura aplikacji mobilnej we 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('Moja aplikacja'),
        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('Ustawienia'), 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('Akcja zakończona')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

W przykładzie użyto NavigationBar z Material 3 zamiast przestarzałego BottomNavigationBar. Scaffold automatycznie łączy wszystkie części: podczas otwierania Drawer SnackBar jest ukrywany, podczas przełączania zakładek body jest aktualizowane, a FloatingActionButton pozostaje na swoim miejscu. ScaffoldMessenger gwarantuje wyświetlenie SnackBar nawet przy wielu Scaffold w hierarchii.

Scaffold i Material 3: cechy konfiguracji

Material 3 (M3) — to ewolucja Material Design, przedstawiona przez Google w 2023 roku. Scaffold w M3 otrzymał szereg zmian: nowy widget NavigationBar zamiast BottomNavigationBar, obsługę Dynamic Color przez ColorScheme.fromSeed i zaktualizowane zalecenia dotyczące odstępów i wysokości komponentów. Przejście na M3 nie wymaga wymiany Scaffold — wystarczy zaktualizować motyw aplikacji.

Aby włączyć Material 3 w projekcie, należy ustawić useMaterial3: true w ThemeData. Scaffold automatycznie dostosowuje wygląd: odstępy stają się większe (24dp zamiast 16dp), kolory są przeliczane z seed-koloru, a FloatingActionButton otrzymuje większe rozmiary z zaokrąglonymi rogami. Przy tym wszystkie istniejące właściwości Scaffold pozostają działające.

Według Material Design 3 Specification (2026), zaleca się używanie NavigationBar z trzema do pięciu punktami zamiast BottomNavigationBar. Scaffold obsługuje obie opcje, ale NavigationBar zapewnia lepszą obsługę adaptacyjności i Material You na urządzeniach Pixel.

Konfiguracja Scaffold pod Material 3

Do poprawnego działania Scaffold z M3 wystarczy zaktualizować motyw i zastąpić BottomNavigationBar na NavigationBar. Kolory zostaną automatycznie obliczone przez ColorScheme.fromSeed, a Scaffold dostosuje odstępy do nowych standardów. W razie potrzeby można bezpośrednio nadpisać backgroundColor.