AppBar — co to jest, konfiguracja i widżety Flutter

Czym jest AppBar we Flutter

AppBar — to standardowy komponent Material górnego paska, który wyświetla się w górnej części Scaffold. Zawiera tytuł ekranu, przycisk nawigacji (zwykle ikona hamburgera lub strzałka „Wstecz”) oraz akcje — ikony otwierające wyszukiwanie, ustawienia lub inne funkcje. AppBar automatycznie dostosowuje się do platformy: na Androidzie używany jest standardowy Material bottom-shadow, na iOS — bardziej płaski design z przezroczystością.

AppBar implementuje interfejs PreferredSizeWidget, co oznacza, że jego wysokość jest stała i znana przed budowaniem. Domyślnie wysokość AppBar wynosi 56dp na Androidzie i 44dp na iOS w orientacji pionowej, z uwzględnieniem SafeArea u góry. Ta cecha pozwala Scaffold wcześniej obliczyć dostępne miejsce dla body, unikając przebudowy podczas renderowania.

Według Flutter Material Library Guide (2026), AppBar przeszedł kilka iteracji: we Flutter 1.x był prostym kontenerem z tekstem, we Flutter 2.x otrzymał obsługę Material 3 i flexibleSpace, a we Flutter 3.x — integrację z System UI (kolor paska stanu, przezroczystość). Nowoczesny AppBar obsługuje Dynamic Color z Material You na urządzeniach Android 12+.

Struktura AppBar: właściwości i parametry

AppBar udostępnia zestaw parametrów kontrolujących każdą część górnego paska. Zrozumienie tych właściwości pozwala elastycznie dostosowywać pasek do dowolnych wymagań projektowych bez tworzenia niestandardowych rozwiązań.

Title i leading: konfiguracja tytułu i nawigacji

Właściwość title przyjmuje dowolny widżet, ale najczęściej używany jest Text z konfiguracją stylu przez TextStyle. W przypadku długich tytułów zaleca się owijanie title w Flexible, aby tekst poprawnie się przycinał przy braku miejsca. Właściwość leading automatycznie zastępowana jest przez BackButton przy przejściu na zagnieżdżony ekran przez Navigator.push, jeśli nie jest ustawiona jawnie.

Actions: rozmieszczanie ikon akcji

Lista actions zawiera widżety wyrównane do prawej krawędzi AppBar. Każdy element nie powinien być szerszy niż 48dp (standard Material Design). Do grupowania akcji używaj PopupMenuButton — ukrywa to mniej ważne opcje w menu rozwijanym i spełnia zalecenia Material dotyczące gęstości interfejsu.

Dostosowanie AppBar: style, kolory i zachowanie

AppBar obsługuje głębokie dostosowanie przez właściwości koloru, cienia i odstępów. Podstawowe wygląd dziedziczony jest z motywu aplikacji, ale każdą właściwość można nadpisać indywidualnie. Rozważmy główne scenariusze konfiguracji.

Kolor tła AppBar ustawia się przez backgroundColor. Jeśli nie jest określony, używany jest appBarTheme z ThemeData. W Material 3 kolor AppBar jest automatycznie obliczany z ColorScheme.primary, ale można go nadpisać dla konkretnego ekranu. Dla przezroczystego AppBar (często używanego w profilach) ustaw backgroundColor: Colors.transparent z elevation: 0.

Właściwość elevation zarządza cieniem pod AppBar. Wartość 0 usuwa cień, tworząc efekt „płaskiego” paska, co jest istotne w Material 3. Wartość 4 daje standardowy cień Material Design. Do niestandardowego zarządzania cieniem używaj shadowColor — kolor cienia, który wizualnie oddziela pasek od treści.

Do zarządzania kolorem tekstu w AppBar używaj foregroundColor. Ta właściwość wpływa na kolor tytułu, ikon i tekstu w actions. Przy zmianie backgroundColor automatycznie dobierany jest kontrastowy foregroundColor, ale można go ustawić强制owo dla niestandardowych designów.

SliverAppBar: animowana wersja AppBar

SliverAppBar — to rozszerzenie AppBar do użycia wewnątrz CustomScrollView, które obsługuje animację podczas przewijania: zwijanie (collapsing), efekt paralaksy i przypinanie (pinned). W przeciwieństwie do standardowego AppBar, SliverAppBar jest widżetem sliver i może dynamicznie zmieniać rozmiar w zależności od pozycji przewijania.

Główne tryby SliverAppBar określane są przez kombinację właściwości pinned, floating i snap. W trybie pinned pasek zawsze pozostaje widoczny w górnej części ekranu. W trybie floating pojawia się przy przewijaniu wstecz. Kombinacja floating + snap tworzy zachowanie „lepkiego” paska, który wysuwa się przy najmniejszym przewinięciu w górę, co jest często używane w kanałach wiadomości.

Według Flutter API SliverAppBar (2026), do użycia SliverAppBar należy zastąpić zwykły ListView lub Column na CustomScrollView z widżetami sliver. Scaffold nadal działa poprawnie, ale właściwość appBar Scaffold musi być null — SliverAppBar umieszczany jest wewnątrz CustomScrollView jako pierwszy sliver.

Przykład konfiguracji AppBar w aplikacji

Rozważmy przykład AppBar z wyszukiwarką, menu rozwijanym i TabBar. Ten kod demonstruje typową konfigurację górnego paska w produkcyjnej aplikacji Flutter.

Scaffold(
  appBar: AppBar(
    title: const Text('Katalog'),
    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('Ustawienia')),
          const PopupMenuItem(value: 'about', child: Text('O aplikacji')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

W przykładzie AppBar zawiera wyśrodkowany tytuł, przycisk otwierania Drawer po lewej, ikonę wyszukiwania i menu rozwijane po prawej. TabBar w bottom umożliwia przełączanie między kategoriami produktów. Taka konfiguracja pokrywa większość scenariuszy aplikacji mobilnych: nawigacja, wyszukiwanie, dodatkowe opcje i przełączanie sekcji — wszystko w jednym górnym pasku.