Scaffold: ce este, structura și widget-urile Flutter

Ce este Scaffold în Flutter

Scaffold — un widget-compozitor din biblioteca Material Design care formează structura vizuală de bază a ecranului. Implementează modelul standard de aplicație Material: panoul superior, corpul ecranului, meniul lateral și butoanele plutitoare. Spre deosebire de Container, care doar setează dimensiuni și stil, Scaffold gestionează întregul ecran ca un sistem unitar.

Fiecare aplicație Flutter construită după Material Design începe cu MaterialApp, în interiorul căreia fiecare ecran este înfășurat într-un Scaffold. Exact Scaffold asigură afișarea corectă a AppBar pe toate dispozitivele, luând în considerare SafeArea pentru iPhone X și versiunile ulterioare. De asemenea, răspunde de ordinea z: Drawer se afișează deasupra body, iar SnackBar — deasupra întregii interfețe, dar sub ferestrele de dialog.

Conform Flutter API Reference (2026) oficial, Scaffold este o condiție obligatorie pentru funcționarea corectă a widget-urilor precum SnackBar, BottomSheet și PersistentBottomSheet. Fără Scaffold, aceste componente aruncă o excepție, deoarece depind de InheritedWidget Scaffold.of pentru accesul la contextul Scaffold. Prin urmare, plasarea oricărui conținut direct în Container în loc de Scaffold este o eroare frecventă a dezvoltatorilor începători, care duce la pierderea funcționalității Material.

Scaffold în ierarhia widget-urilor

Într-o aplicație Flutter tipică, Scaffold se află în interiorul MaterialApp, de obicei sub WidgetsApp sau CupertinoApp în dezvoltarea cross-platform. MaterialApp creează Navigator și tema, iar Scaffold determină structura ecranului curent. Fiecare ecran poate avea propriul Scaffold cu AppBar, Drawer și BottomNavigationBar unice, ceea ce permite configurarea flexibilă a interfeței pentru o pagină specifică.

Pentru personalizare avansată, Scaffold poate fi combinat cu NestedScrollView — aceasta permite implementarea efectelor complexe de derulare, de exemplu, un AppBar care dispare cu efect de paralaxă. Totuși, în majoritatea cazurilor, Scaffold standard cu proprietățile sale este suficient pentru construirea unui ecran pregătit pentru producție.

Structura Scaffold: părțile cheie ale scheletului

Scaffold constă din mai multe zone obligatorii și opționale, fiecare responsabilă pentru o anumită parte a interfeței. Să examinăm fiecare parte separat pentru a înțelege cum interacționează între ele.

AppBar — panoul superior

AppBar — panoul superior al ecranului care afișează titlul, butonul de navigare și acțiunile. Obține automat înălțimea corectă de 56dp și ia în considerare SafeArea pentru dispozitivele cu crestătură. În AppBar poate fi încorporat un TabBar pentru comutarea filelor folosind proprietatea bottom.

Drawer — meniul lateral

Drawer — un panou care se deplasează din stânga și oferă navigare prin secțiunile aplicației. Scaffold adaugă automat pictograma hamburger în AppBar dacă proprietatea drawer este setată. Drawer poate conține DrawerHeader, ListView cu elemente de meniu și informații despre utilizator.

BottomNavigationBar — navigarea inferioară

BottomNavigationBar — panoul din partea de jos a ecranului pentru comutarea între secțiunile principale. Conține de la 2 la 5 pictograme cu etichete și suportă Material 3 cu indicare activă prin NavigationBar. Scaffold îl poziționează în partea de jos a ecranului, deplasând automat body mai sus pentru ca conținutul să nu fie acoperit.

FloatingActionButton — butonul plutitor

FloatingActionButton — un buton rotund plasat în colțul din dreapta jos al ecranului. Este folosit pentru acțiunea principală pe ecran, de exemplu, adăugarea unei noi înregistrări sau trimiterea unui mesaj. Scaffold suportă mai multe FAB-uri cu animație extinsă prin proprietățile extended.

Body — conținutul principal

Body — zona centrală a ecranului în care se plasează conținutul principal. Ca body poate fi orice widget: Column, ListView, GridView, Stack sau o compoziție personalizată. Scaffold calculează automat înălțimea body luând în considerare AppBar, BottomNavigationBar și SafeArea, ceea ce elimină necesitatea ajustării manuale a dimensiunilor.

Proprietățile principale ale Scaffold

Scaffold oferă peste 30 de proprietăți pentru configurarea aspectului și comportamentului ecranului. Printre acestea se numără atât proprietăți obligatorii (body), cât și opționale, care gestionează spațierile, fundalul și starea tastaturii. Înțelegerea fiecărei proprietăți ajută la reglarea precisă a interfeței conform cerințelor de design.

Proprietatea resizeToAvoidBottomInset este deosebit de importantă la lucrul cu formulare: când este setată pe true (implicit), Scaffold comprimă automat body la apariția tastaturii pentru ca câmpul de introducere să rămână vizibil. Aceasta elimină necesitatea de a scrie ascultători personalizați de tastatură. Pentru scenarii personalizate cu SingleChildScrollView, proprietatea poate fi dezactivată.

Exemplu de utilizare a Scaffold în aplicație

Să examinăm un exemplu practic de Scaffold cu un set complet de componente Material. Codul creează un ecran cu AppBar, Drawer, BottomNavigationBar, FloatingActionButton și SnackBar — o structură tipică a unei aplicații mobile în 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('Aplicația mea'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('Meniu')),
            ListTile(title: const Text('Setări'), 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('Acțiune finalizată')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

În exemplu se folosește NavigationBar din Material 3 în locul BottomNavigationBar învechit. Scaffold leagă automat toate părțile: la deschiderea Drawer, SnackBar este ascuns, la comutarea filelor body se actualizează, iar FloatingActionButton rămâne pe loc. ScaffoldMessenger garantează afișarea SnackBar chiar și în prezența mai multor Scaffold în ierarhie.

Scaffold și Material 3: caracteristici de configurare

Material 3 (M3) — este evoluția Material Design, prezentată de Google în 2023. Scaffold în M3 a primit o serie de schimbări: noul widget NavigationBar în locul BottomNavigationBar, suport pentru Dynamic Color prin ColorScheme.fromSeed și recomandări actualizate pentru spațieri și înălțimi ale componentelor. Trecerea la M3 nu necesită înlocuirea Scaffold — este suficient să actualizați tema aplicației.

Pentru activarea Material 3 în proiect, trebuie să setați useMaterial3: true în ThemeData. Scaffold adaptează automat aspectul vizual: spațierile devin mai mari (24dp în loc de 16dp), culorile sunt recalculate din culoarea seed, iar FloatingActionButton primește dimensiuni mai mari cu colțuri rotunjite. În același timp, toate proprietățile existente ale Scaffold rămân funcționale.

Conform Material Design 3 Specification (2026), se recomandă utilizarea NavigationBar cu trei-cinci puncte în locul BottomNavigationBar. Scaffold suportă ambele variante, dar NavigationBar oferă un suport mai bun pentru adaptabilitate și Material You pe dispozitivele Pixel.

Configurarea Scaffold pentru Material 3

Pentru funcționarea corectă a Scaffold cu M3, este suficient să actualizați tema și să înlocuiți BottomNavigationBar cu NavigationBar. Culorile vor fi calculate automat prin ColorScheme.fromSeed, iar Scaffold va ajusta spațierile la noile standarde. La nevoie, puteți suprascrie backgroundColor direct.