BottomNavigationBar

W aplikacjach Flutter widżet BottomNavigationBar umożliwia użytkownikom wyświetlanie dowolnej kategorii podczas uruchamiania aplikacji i szybkie przeglądanie innych za jednym dotknięciem palca.

BottomNavigationBar wyświetla rząd małych widżetów na dole aplikacji Flutter. Zwykle służy do pokazania około trzech do pięciu elementów. Każdy element musi mieć etykietę 'label' i ikonę 'icon'. BottomNavigationBar pozwala wybrać jeden element na raz i szybko przejść do danej strony.

---

Prosty BottomNavigationBar będzie wyglądał następująco:

Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.call),
              label: 'Rozmowy',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.camera),
              label: 'Aparat',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.chat),
              label: 'Wiadomości',
            ),
          ],
        ),
      ),

---

currentIndex

Żeby BottonNavigationBar działał musimy dostarczyć taki parametr jak currentIndex. Oczekuje on wartości int. Int musi posiadać liczby całkowite jak 1,2,3,8..., nie może posiadać liczb zmiennoprzecinkowych jak 2.8 itd. Domyślnie ten parametr posiada wartość 0, czyli wskazuje na pierwszy element (w tym przypadku wskazuje element 'Rozmowy') gdy zmienimy currentIndex na 1 to przełączy się na drugi element 'Aparat'.

Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: 0,
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.call),
              label: 'Rozmowy',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.camera),
              label: 'Aparat',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.chat),
              label: 'Wiadomości',
            ),
          ],
        ),
      ),

Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: 1,
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.call),
              label: 'Rozmowy',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.camera),
              label: 'Aparat',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.chat),
              label: 'Wiadomości',
            ),
          ],
        ),
      ),

---

onTap

Aby móc manipulować currentIndex musimy utworzyć StatefulWidget oraz parametr var, który nazywa się currentIndex i posiada domyślną wartość początkową 0:

var currentIndex = 0;

Tę nazwę należy użyć w BottomNavogationBar w parametrze currentIndex:

currentIndex: currentIndex,

Nazwa naszej zmiennej nazywa się tak samo jak parametr, ale to nie szkodzi, jest to nawet pożądane aby tak nazywać.

Musimy teraz uzyskać odpowiedź od BottomNavigationBar, który element został wybrany i jaki on ma Index i to dostarcza nam parametr o nazwie onTap. Posiada on funkcję, która dostarcza nam jakąś wartość wpisaną między nawiasami, więc jak chcemy ją wykorzystać musimy zdefiniować jej nazwę. Ja nazwałam ją newIndex, ponieważ to będzie int przechowywujący wartość klikniętego przycisku i za pomocą setState ustawiamy nasz currentIndex na nową wartość, która przyszła z onTap.

 onTap: (newIndex) {
            setState(() {
              currentIndex = newIndex;
            });
          },

Całość kodu wygląda następującą:

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  var currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: currentIndex,
          onTap: (newIndex) {
            setState(() {
              currentIndex = newIndex;
            });
          },
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.call),
              label: 'Rozmowy',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.camera),
              label: 'Aparat',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.chat),
              label: 'Wiadomości',
            ),
          ],
        ),
      ),
    );
  }
}

---

Widżet Builder

W zależności od wybranego przycisku Scaffold powinien nam wyświetlać daną treść, czyli w zależności od tego jaki jest crurrentIndex to powinien być inny parametr body. Aby coś takiego zbudować posłużymy się widżetem Builder. Należy kliknąć np. na Center, następnie na żółtą lampeczkę i wybrać Wrap with Builder.

Builder pozwala nam trochę bardziej zarządzać tym co dostanie parametr body. Zwróćmy teraz dla każdego indexu inny widżet.

if (currentIndex == 0) {
            return const Center(
              child: Icon(
                Icons.call,
                size: 200,
              ),
            );
          }
          if (currentIndex == 1) {
            return const Center(
              child: Icon(
                Icons.camera,
                size: 200,
              ),
            );
          }
          return const Center(
            child: Icon(
              Icons.chat,
              size: 200,
            ),
          );

Całość kodu wygląda następująco:

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Builder(
          builder: (context) {
            if (currentIndex == 0) {
              return const Center(
                child: Icon(
                  Icons.call,
                  size: 200,
                ),
              );
            }
            if (currentIndex == 1) {
              return const Center(
                child: Icon(
                  Icons.camera,
                  size: 200,
                ),
              );
            }
            return const Center(
              child: Icon(
                Icons.chat,
                size: 200,
              ),
            );
          },
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: currentIndex,
          onTap: (newIndex) {
            setState(() {
              currentIndex = newIndex;
            });
          },
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.call),
              label: 'Rozmowy',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.camera),
              label: 'Aparat',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.chat),
              label: 'Wiadomości',
            ),
          ],
        ),
      ),
    );
  }
}

---

Background color

Możesz zmienić kolor tła BottomNavigationBar. Robi się to po prostu za pomocą parametru backgroundColor.

 bottomNavigationBar: BottomNavigationBar(
          backgroundColor: Colors.amber,
          ...

---

Selected item

Można sprawić, by zaznaczony element wyglądał inaczej niż niezaznaczony, używając kilku wybranych właściwości BottomNavigationBar:

bottomNavigationBar: BottomNavigationBar(
          backgroundColor: Colors.amber,
          selectedFontSize: 20,
          selectedLabelStyle: const TextStyle(fontWeight:FontWeight.bold),
          selectedItemColor: Colors.red,
          selectedIconTheme: const IconThemeData(color: Colors.blue, size: 40),
          ...

---

Unselected items

Można także zmienić wygląd i działanie niewybranych elementów:

bottomNavigationBar: BottomNavigationBar(
          unselectedIconTheme: const IconThemeData(
            color: Colors.green,
            ),
          unselectedItemColor: Colors.white,
          ...

---

Usunięcie etykiet

Jeśli chcesz całkowicie pozbyć się podpisów ikon, możesz użyć showSelectedLabels i showUnselectedLabels:

bottomNavigationBar: BottomNavigationBar(
          showSelectedLabels: false,
          showUnselectedLabels: false,
          ...

Podświetlanie wybranego elementu

Wybrany element można wyróżnić, ustawiając typ BottomNavigationBar na BottomNavigationBarType.shifting:

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.shifting,
          ...

---

PODSUMOWANIE:

W tym artykule pokazałam, jak zbudować prosty BottomNavigationBar i dostosować go pod względem kolorystyki i innych ciekawych parametrów. Mam nadzieję, że praktyczne przykłady, które przeanalizowałam w tym artykule, pomogły Ci zrozumieć te pojęcia. 👩‍💻