[Flutter] BottomNavigationBar Widget - 사용법

 

 

이번 포스팅에서는 BottomnavigationBar에 대하여 알아보겠습니다.

 

많은 앱들에서 하단의 버튼을 사용해 페이지를 전환하는 UI를 사용하고 있습니다. 자주 사용되는 기능이기 때문에 Scaffold위젯과 BottomNavigationBar를 사용하면 손쉽게 해당 UI를 구현할 수 있게 구성돼 있습니다. 

 

 

 

1. 기본 사용법

2. currentIndex, onTap

3. showSelectedLabels, showUnselectedLabels

4. 기타 특성들

 

 

 

 

 

1. 기본 사용법

우선 Scaffold위젯의 bottomNavigationBar 특성에 BottomNavigationBar 위젯을 넘겨줘야 합니다. BottomNavigationBar 위젯에는 BottomNavigationBarItem 클래스를 반드시 2개 이상 넘겨줘야 합니다. 
BottomNavigationBarItem 클래스에는 activeIcon, 기본 Icon, backgroundColor, label의 특성이 있습니다. 위젯을 빌드하면 가장 첫 번째 항목이 선택되어 있습니다. 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("BottomNavigationBarScreen"),
      ),
      bottomNavigationBar: _bottom(),
    );
  }

  Widget _bottom() {
    return BottomNavigationBar(
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home_outlined),
          activeIcon: Icon(Icons.home),
          backgroundColor: Colors.white,
          label: "홈",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.alarm_off),
          activeIcon: Icon(Icons.access_alarm),
          backgroundColor: Colors.white,
          label: "알림",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person_outline),
          activeIcon: Icon(Icons.person),
          backgroundColor: Colors.white,
          label: "친구",
        ),
      ],
    );
  }

 

 

 

 

2. currentIndex, onTap

currentIndex와 onTap함수를 이용하면 다른 아이템을 선택할 수 있습니다. currentIndex는 현재 선택된 index의 값을 설정해 주고, onTap함수는 클릭한 index를 알려줍니다. 때문에 변수를 하나 생성하여 onTap 함수가 호출되면 해당 변수를 변경시키고, currentIndex에 넘겨주는 것이 필요합니다. 

오른쪽 이미지는 가운데 있는 알림을 클릭해서 selectedIndex를 1로 변경시킨 이미지입니다. 

  int selectedIndex = 0;

  Widget _bottom() {
    return BottomNavigationBar(
      currentIndex: selectedIndex,
      onTap: (value) {
        setState(() {
          selectedIndex = value;
        });
      },
      items: const [
      
      	...
      
      ],
    );
  }

 

 

 

 

3. showSelectedLabels, showUnselectedLabels

Item에 있는 Label을 보여줄지 말지 설정할 수 있습니다. showSelectedLabels = true, showUnselectedLabels = false로 설정한다면 오른쪽의 이미지처럼 구현됩니다. 

  int selectedIndex = 0;

  Widget _bottom() {
    return BottomNavigationBar(
      currentIndex: selectedIndex,
      onTap: (value) {
        setState(() {
          selectedIndex = value;
        });
      },
      
      showSelectedLabels: true,
      showUnselectedLabels: false,
      
      items: const [
      
      	...
      
      ],
    );
  }

 

 

 

 

 

4. 기타 특성들

이 외에도 아이콘의 컬러나 사이즈, Label의 스타일, 애니메이션 타입 등을 설정할 수 있습니다. 코드에 주석으로 설명을 추가했습니다.

  int selectedIndex = 0;

  Widget _bottom() {
    return BottomNavigationBar(
      currentIndex: selectedIndex,
      onTap: (value) {
        setState(() {
          selectedIndex = value;
        });
      },
      
      showSelectedLabels: true,
      showUnselectedLabels: false,

      elevation: 150,
      iconSize: 30,

      // 선택된 Label의 스타일
      selectedLabelStyle: const TextStyle(
        color: Colors.black,
        fontSize: 20,
      ),

      // 선택 안 된 Label의 스타일
      unselectedLabelStyle: const TextStyle(
        color: Colors.grey,
        fontSize: 16,
      ),

      // selectedLabelStyle을 설정 안했을 때 적용 가능
      // selectedFontSize: 30,

      // unselectedLabelStyle을 설정 안했을 때 적용 가능
      // unselectedFontSize: 20,

      // 선택된 Icon의 컬러
      selectedItemColor: Colors.purple,

      // 선택 안 된 Icon의 컬러
      unselectedItemColor: Colors.grey,

      // selectedItemColor을 설정 안 했을 때 적용 가능
      // fixedColor: Colors.red,

      // 애니메이션 타입
      type: BottomNavigationBarType.shifting,

      // 배경 컬러
      // BottomNavigationBarType.fixed인 경우 사용 가능
      backgroundColor: Colors.red.shade100,
      
      items: const [
      
      	...
      
      ],
    );
  }

 

 

 

 

 

최종 영상

 

 

 

 

Full code

import 'package:flutter/material.dart';

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

  @override
  State<BottomNavigationBarScreen> createState() =>
      _BottomNavigationBarScreenState();
}

class _BottomNavigationBarScreenState extends State<BottomNavigationBarScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("BottomNavigationBarScreen"),
      ),
      // backgroundColor: Colors.blue.shade300,
      bottomNavigationBar: _bottom(),
    );
  }

  int selectedIndex = 0;

  Widget _bottom() {
    return BottomNavigationBar(
      currentIndex: selectedIndex,
      onTap: (value) {
        setState(() {
          selectedIndex = value;
        });
      },
      showSelectedLabels: true,
      showUnselectedLabels: false,

      elevation: 150,
      iconSize: 30,

      // 선택된 Label의 스타일
      selectedLabelStyle: const TextStyle(
        color: Colors.black,
        fontSize: 20,
      ),

      // 선택 안 된 Label의 스타일
      unselectedLabelStyle: const TextStyle(
        color: Colors.grey,
        fontSize: 16,
      ),

      // selectedLabelStyle을 설정 안했을 때 적용 가능
      // selectedFontSize: 30,

      // unselectedLabelStyle을 설정 안했을 때 적용 가능
      // unselectedFontSize: 20,

      // 선택된 Icon의 컬러
      selectedItemColor: Colors.purple,

      // 선택 안 된 Icon의 컬러
      unselectedItemColor: Colors.grey,

      // selectedItemColor을 설정 안 했을 때 적용 가능
      // fixedColor: Colors.red,

      // 애니메이션 타입
      type: BottomNavigationBarType.shifting,

      // 배경 컬러
      // BottomNavigationBarType.fixed인 경우 사용 가능
      backgroundColor: Colors.red.shade100,

      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home_outlined),
          activeIcon: Icon(Icons.home),
          // backgroundColor: Colors.white,
          label: "홈",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.alarm_off),
          activeIcon: Icon(Icons.access_alarm),
          // backgroundColor: Colors.white,
          label: "알림",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person_outline),
          activeIcon: Icon(Icons.person),
          // backgroundColor: Colors.white,
          label: "친구",
        ),
      ],
    );
  }
}