Scaffold: mi ez, szerkezet és Flutter widgetek

Mi az a Scaffold a Flutterben

Scaffold — egy widget-kompozitor a Material Design könyvtárból, amely kialakítja a képernyő alapvető vizuális szerkezetét. Megvalósítja a standard Material alkalmazás mintát: felső panel, képernyőtest, oldalsó menü és lebegő gombok. A Containertől eltérően, amely csak méreteket és stílust állít be, a Scaffold az egész képernyőt egységes rendszerként kezeli.

Minden Material Design szerint épített Flutter alkalmazás MaterialApp-pal kezdődik, amelyen belül minden képernyő Scaffoldba van csomagolva. Pontosan a Scaffold biztosítja az AppBar helyes megjelenítését minden eszközön, figyelembe véve a SafeArea-t az iPhone X és újabb modellek számára. Felelős továbbá a z-sorrendért: a Drawer a body felett, a SnackBar pedig a teljes interfész felett, de a párbeszédablakok alatt jelenik meg.

A hivatalos Flutter API Reference (2026) szerint a Scaffold kötelező feltétel az olyan widgetek helyes működéséhez, mint a SnackBar, BottomSheet és PersistentBottomSheet. Scaffold nélkül ezek a komponensek kivételt dobnak, mivel az InheritedWidget Scaffold.of függőségében állnak a Scaffold kontextusához való hozzáféréshez. Ezért bármilyen tartalom közvetlenül Containerbe helyezése Scaffold helyett gyakori hiba a kezdő fejlesztők körében, ami a Material funkcionalitás elvesztéséhez vezet.

Scaffold a widget hierarchiában

Egy tipikus Flutter alkalmazásban a Scaffold a MaterialApp-on belül található, általában a WidgetsApp vagy CupertinoApp alatt cross-platform fejlesztés esetén. A MaterialApp létrehozza a Navigatort és a témát, a Scaffold pedig meghatározza az aktuális képernyő szerkezetét. Minden képernyő rendelkezhet saját Scaffolddal egyedi AppBar, Drawer és BottomNavigationBar elemekkel, ami lehetővé teszi a felület rugalmas testreszabását egy adott oldalhoz.

Mélyreható testreszabáshoz a Scaffold kombinálható NestedScrollView-val — ez lehetővé teszi összetett görgetési effektusok megvalósítását, például eltűnő AppBar-t parallaxis effektussal. A legtöbb esetben azonban a standard Scaffold tulajdonságaival elegendő egy production-ready képernyő felépítéséhez.

Scaffold szerkezete: a keret fő részei

Scaffold több kötelező és opcionális zónából áll, amelyek mindegyike a felület egy meghatározott részéért felelős. Vizsgáljuk meg az egyes részeket külön-külön, hogy megértsük, hogyan működnek együtt.

AppBar — felső panel

AppBar — a képernyő felső panelje, amely megjeleníti a címet, navigációs gombot és műveleteket. Automatikusan megkapja a megfelelő 56dp magasságot, és figyelembe veszi a SafeArea-t a bevágással rendelkező eszközök számára. Az AppBar-ba TabBar ágyazható be a lapok váltásához a bottom tulajdonság segítségével.

Drawer — oldalsó menü

Drawer — egy panel, amely balról előugrik és navigációt biztosít az alkalmazás szekciói között. A Scaffold automatikusan hozzáadja a hamburger ikont az AppBar-hoz, ha a drawer tulajdonság be van állítva. A Drawer tartalmazhat DrawerHeader-t, ListView-t menüpontokkal és felhasználói információkat.

BottomNavigationBar — alsó navigáció

BottomNavigationBar — panel a képernyő alján a fő szekciók közötti váltáshoz. 2-5 ikont tartalmaz címkékkel és támogatja a Material 3-at aktív jelzéssel a NavigationBar segítségével. A Scaffold a képernyő aljára helyezi, automatikusan feljebb tolva a body-t, hogy a tartalom ne takaródjon.

FloatingActionButton — lebegő gomb

FloatingActionButton — egy kerek gomb a képernyő jobb alsó sarkában. A fő művelethez használják a képernyőn, például új bejegyzés hozzáadásához vagy üzenet küldéséhez. A Scaffold több FAB-ot támogat kiterjesztett animációval az extended tulajdonságokon keresztül.

Body — fő tartalom

Body — a képernyő központi területe, ahová a fő tartalom kerül. Bodyként bármely widget szolgálhat: Column, ListView, GridView, Stack vagy egyedi összeállítás. A Scaffold automatikusan kiszámítja a body magasságát, figyelembe véve az AppBar-t, BottomNavigationBar-t és SafeArea-t, ami kiküszöböli a méretek kézi beállításának szükségességét.

A Scaffold fő tulajdonságai

Scaffold több mint 30 tulajdonságot kínál a képernyő megjelenésének és viselkedésének konfigurálásához. Ezek között vannak kötelező (body) és opcionális tulajdonságok, amelyek a távolságokat, hátteret és billentyűzet állapotát kezelik. Az egyes tulajdonságok megértése segít a felület pontos beállításában a tervezési követelmények szerint.

A resizeToAvoidBottomInset tulajdonság különösen fontos űrlapokkal való munka során: ha true értékre van állítva (alapértelmezett), a Scaffold automatikusan összenyomja a body-t a billentyűzet megjelenésekor, hogy a beviteli mező látható maradjon. Ez kiküszöböli az egyedi billentyűzetfigyelők írásának szükségességét. Egyedi forgatókönyvekhez SingleChildScrollView-val a tulajdonság kikapcsolható.

Példa a Scaffold használatára alkalmazásban

Nézzünk egy gyakorlati példát a Scaffold használatára a Material komponensek teljes készletével. A kód létrehoz egy képernyőt AppBar, Drawer, BottomNavigationBar, FloatingActionButton és SnackBar elemekkel — egy tipikus mobilalkalmazás szerkezete a Flutterben.

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('Az Appom'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('Menü')),
            ListTile(title: const Text('Beállítások'), 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('Művelet befejeződött')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

A példában a NavigationBar használatos a Material 3-ból az elavult BottomNavigationBar helyett. A Scaffold automatikusan összeköti az összes részt: a Drawer megnyitásakor a SnackBar elrejtődik, a lapok váltásakor a body frissül, és a FloatingActionButton a helyén marad. A ScaffoldMessenger garantálja a SnackBar megjelenítését több Scaffold esetén is a hierarchiában.

Scaffold és Material 3: konfigurációs jellemzők

Material 3 (M3) — a Material Design evolúciója, amelyet a Google 2023-ban mutatott be. A Scaffold az M3-ban számos változást kapott: új NavigationBar widget a BottomNavigationBar helyett, Dynamic Color támogatás a ColorScheme.fromSeed segítségével és frissített ajánlások a komponensek távolságaira és magasságaira. Az M3-ra váltás nem igényli a Scaffold cseréjét — elég frissíteni az alkalmazás témáját.

A Material 3 aktiválásához a projektben useMaterial3: true értéket kell beállítani a ThemeData-ban. A Scaffold automatikusan adaptálja a vizuális megjelenést: a távolságok nagyobbak lesznek (24dp a 16dp helyett), a színek újraszámítódnak a seed színből, és a FloatingActionButton nagyobb méreteket kap lekerekített sarkokkal. Mindeközben a Scaffold összes meglévő tulajdonsága funkcionális marad.

A Material Design 3 Specification (2026) szerint ajánlott a NavigationBar használata három-öt elemmel a BottomNavigationBar helyett. A Scaffold mindkét változatot támogatja, de a NavigationBar jobb támogatást nyújt az alkalmazkodóképességhez és a Material You szolgáltatáshoz Pixel eszközökön.

A Scaffold konfigurálása Material 3-hoz

A Scaffold M3-mal való helyes működéséhez elég frissíteni a témát és a BottomNavigationBar-t NavigationBar-ra cserélni. A színek automatikusan kiszámítódnak a ColorScheme.fromSeed segítségével, a Scaffold pedig igazítja a távolságokat az új szabványokhoz. Szükség esetén a backgroundColor közvetlenül felülírható.