AppBar

Iwona
8 sie 2022
2 minut(y) czytania

Zaktualizowano: 9 sie 2022

Pasek aplikacji jest jednym z najczęściej używanych elementów we wszelkiego rodzaju aplikacjach. Może służyć do przechowywania pola wyszukiwania, przycisków do nawigacji między stronami lub po prostu tytułu strony. Ponieważ jest to tak powszechnie używany komponent, Flutter zapewnia dedykowany widżet dla tej funkcji o nazwie AppBar.

AppBar to komponent aplikacji zbudowany zgodnie z wytycznymi Material Design. Zwykle jest umieszczony u góry ekranu i może zawierać inne widżety w swoim układzie. AppBar zwykle wyświetla informacje takie jak logo i tytuły, a także często zawiera przyciski lub inne punkty interakcji użytkownika. AppBar ma właściwości, takie jak: actions, title, leading, backgroundColor, itp., które pomagają nam ulepszyć wygląd lub funkcjonalność AppBar.

Oto jak wygląda domyślny AppBar:

Scaffold(
  appBar: AppBar(),
),

Leading

Leading może być przypisany do tekstu, ikony, a nawet wielu widżetów w rzędzie:

Scaffold(
        appBar: AppBar(
          leading: const Icon(
            Icons.account_circle_rounded,
          ),
        ),
      ),

Możesz kontrolować, ile ikonka ma zająć szerokości:

Title

Jak sama nazwa wskazuje, title służy głównie do wyświetlania tytułów, takich jak tytuł aplikacji lub nagłówek strony:

Scaffold(
        appBar: AppBar(
          title: const Text(
            'Strona profilowa',
          ),
        ),
      ),

Ale nie musisz ograniczać się do tego, ponieważ title zawiera również widżet. Możesz go używać do wyświetlania ikon, obrazów, kształtów lub dowolnej ich kombinacji za pomocą widżetów układu, takich jak wiersz i kolumna:

Scaffold(
        appBar: AppBar(
          title: SizedBox(
            width: 40,
            child: Image.network('url'),
          ),
        ),
      ),

mój przykładowy url: 'https://cdn-icons-png.flaticon.com/512/1933/1933646.png'

Domyślnie tytuł jest wyrównany do lewej strony AppBar, zgodnie z wytycznymi. Możesz to zmienić, aby wyrównać go do środka:

Scaffold(
        appBar: AppBar(
          title: SizedBox(
            width: 40,
            child: Image.network('url'),
          ),
          centerTitle: true,
        ),
      ),

Actions

Actions to lista widżetów, które są wyrównane do prawej strony AppBar. Zwykle widzimy je w aplikacjach używanych jako przyciski do uruchamiania rozwijanych menu, awatarów profili itp.:

Scaffold(
        appBar: AppBar(
          actions: const [
            Icon(Icons.more_vert),
          ],
        ),
      ),

Kolor tła

AppBar zawiera wszelkiego rodzaju właściwości, w tym kolory, rozmiary, motywy ikon, motywy tekstowe i inne:

Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.amber,
        ),
      ),

Elevation

Ta właściwość kontroluje rozmiar cienia poniżej paska aplikacji:

Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.amber,
          elevation: 30,
        ),
      ),

Kolor cienia

Możesz nawet bawić się kolorem cienia. Poniższy kod zmienia kolor cienia AppBar na niebieski:

Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.amber,
          elevation: 30,
          shadowColor: Colors.blue,
        ),
       ),

Motyw tekstowy

Załóżmy, że chcesz zmienić kolor tekstu na czerwony i ustawić rozmiar czcionki na 25:

Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.amber,
          title: const Text(
            'Strona profilowa',
            style: TextStyle(
            color: Colors.red, 
            fontSize: 25),
          ),
        ),
       ),

Motyw ikon

Poniższy kod zmienia kolor ikony na zielony, a rozmiar na 36:

Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.amber,
          actions: const [
            Icon(Icons.more_vert),
          ],
          actionsIconTheme: const IconThemeData(
            color: Colors.green,
            size: 36,
          ),
        ),
      ),

Wysokość i przezroczystość paska narzędzi

Zobacz przykład jak zmienić wysokość i przezroczystość elementów paska narzędzi:

Scaffold(
        appBar: AppBar(
          toolbarHeight: 100,
          toolbarOpacity: 0.5,
          backgroundColor: Colors.amber,
          title: const Text('Strona profilowa'),
        ),
      ),

PODSUMOWANIE:

Jeśli dotarłeś tak daleko, powinieneś teraz zrozumieć:

Czym jest AppBar i jak jest używany we Flutterze,
Układ AppBar (leading, title i actions),
Jak zmieniać motyw ikon, tekstu, tło, kolor cieni czy wysokość paska narzędzi.

Więc mamy to! Mam nadzieję, że ten artykuł pomoże Ci stworzyć piękne AppBar we wszystkich przyszłych aplikacjach Fluttera.

Odkrywaj Widgety