AppBar — ce este, configurare și widget-uri Flutter

Ce este AppBar în Flutter

AppBar — este o componentă Material standard a panoului superior care se afișează în partea de sus a Scaffold. Conține titlul ecranului, butonul de navigare (de obicei iconița „hamburger“ sau săgeata „Înapoi“) și acțiuni — iconițe care deschid căutarea, setările sau alte funcții. AppBar se adaptează automat la platformă: pe Android se folosește Material bottom-shadow standard, pe iOS — un design mai plat cu transparență.

AppBar implementează interfața PreferredSizeWidget, ceea ce înseamnă că înălțimea sa este fixă și cunoscută înainte de construire. În mod implicit, înălțimea AppBar este de 56dp pe Android și 44dp pe iOS în orientare portret, ținând cont de SafeArea deasupra. Această caracteristică permite Scaffold să calculeze în avans spațiul disponibil pentru body, evitând recompunerea în timpul redării.

Conform Flutter Material Library Guide (2026), AppBar a trecut prin mai multe iterații: în Flutter 1.x era un container simplu cu text, în Flutter 2.x a primit suport pentru Material 3 și flexibleSpace, iar în Flutter 3.x — integrare cu System UI (culoarea barei de stare, transparență). AppBar modern suportă Dynamic Color de la Material You pe dispozitive Android 12+.

Structura AppBar: proprietăți și parametri

AppBar oferă un set de parametri care controlează fiecare parte a panoului superior. Înțelegerea acestor proprietăți permite configurarea flexibilă a panoului pentru orice cerințe de design fără a crea soluții personalizate.

Title și leading: configurarea titlului și navigării

Proprietatea title acceptă orice widget, dar cel mai des se folosește Text cu configurarea stilului prin TextStyle. Pentru titluri lungi, se recomandă înfășurarea title în Flexible pentru ca textul să se taie corect la lipsa de spațiu. Proprietatea leading este înlocuită automat cu BackButton la trecerea pe un ecran imbricat prin Navigator.push, dacă nu este setată explicit.

Actions: amplasarea iconițelor de acțiuni

Lista actions conține widget-uri aliniate la marginea dreaptă a AppBar. Fiecare element nu trebuie să fie mai lat de 48dp (standard Material Design). Pentru gruparea acțiunilor, folosiți PopupMenuButton — acesta ascunde opțiunile mai puțin importante într-un meniu derulant și respectă recomandările Material privind densitatea interfeței.

Personalizarea AppBar: stiluri, culori și comportament

AppBar suportă personalizare profundă prin proprietățile de culoare, umbră și margini. Aspectul de bază este moștenit din tema aplicației, dar fiecare proprietate poate fi suprascrisă individual. Să analizăm principalele scenarii de configurare.

Culoarea de fundal a AppBar se setează prin backgroundColor. Dacă nu este specificată, se folosește appBarTheme din ThemeData. În Material 3, culoarea AppBar se calculează automat din ColorScheme.primary, dar poate fi suprascrisă pentru un anumit ecran. Pentru un AppBar transparent (des folosit în profiluri), setați backgroundColor: Colors.transparent cu elevation: 0.

Proprietatea elevation controlează umbra sub AppBar. Valoarea 0 elimină umbra, creând un efect de panou „plat“, ceea ce este relevant pentru Material 3. Valoarea 4 oferă umbra standard Material Design. Pentru control personalizat al umbrei, folosiți shadowColor — culoarea umbrei care separă vizual panoul de conținut.

Pentru controlul culorii textului în AppBar, folosiți foregroundColor. Această proprietate afectează culoarea titlului, iconițelor și textului în actions. La schimbarea backgroundColor, se selectează automat un foregroundColor contrastant, dar poate fi setat forțat pentru designuri non-standard.

SliverAppBar: versiunea animată a AppBar

SliverAppBar — este o extensie a AppBar pentru utilizare în CustomScrollView, care suportă animație la derulare: restrângere (collapsing), efect de paralaxă și fixare (pinned). Spre deosebire de AppBar standard, SliverAppBar este un widget sliver și poate schimba dimensiunea dinamic în funcție de poziția de derulare.

Modurile principale ale SliverAppBar sunt determinate de combinația proprietăților pinned, floating și snap. În modul pinned, panoul rămâne întotdeauna vizibil în partea de sus a ecranului. În modul floating, apare la derularea înapoi. Combinația floating + snap creează un comportament de panou „lipicios“ care apare la cea mai mică derulare în sus, des folosit în feed-uri de știri.

Conform Flutter API SliverAppBar (2026), pentru a folosi SliverAppBar, trebuie să înlocuiți ListView sau Column obișnuit cu CustomScrollView cu widget-uri sliver. Scaffold continuă să funcționeze corect, dar proprietatea appBar a Scaffold trebuie să fie null — SliverAppBar se plasează în CustomScrollView ca primul sliver.

Exemplu de configurare a AppBar în aplicație

Să analizăm un exemplu de AppBar cu căutare, meniu derulant și TabBar. Acest cod demonstrează o configurație tipică a panoului superior într-o aplicație Flutter de producție.

Scaffold(
  appBar: AppBar(
    title: const Text('Catalog'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('Setări')),
          const PopupMenuItem(value: 'about', child: Text('Despre aplicație')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

În exemplu, AppBar conține un titlu centrat, un buton de deschidere a Drawer în stânga, o iconiță de căutare și un meniu derulant în dreapta. TabBar în bottom permite comutarea între categoriile de produse. Această configurație acoperă majoritatea scenariilor aplicațiilor mobile: navigare, căutare, opțiuni suplimentare și comutare între secțiuni — totul într-un singur panou superior.