[Flutter] BottomNavigationBar (플러터 바텀네비게이션) 사용 방법

안녕하세요 오늘은 BottomNavigationBar 사용 방법에 대해 설명드리겠습니다.

이런 기본적인 위젯이 알아두면 쉽게 써먹을 수 있죠 많이 쓰이기도 하구요.

 

기본적으로 사용하는 방법 중 2가지를 소개해 드리자면, 

스와이프(Swipe)가 필요한 경우 그렇지 않은 경우로 나뉜 방법을 설명 드리겠습니다.

 

1. Swipe 가능

 

DefaultTabController을 이용하는 방식입니다.
Scaffold의 Body 부분을 TabBarView로 선언해 주면서 tab 별 화면을 작성하고 

bottomNavigationBar에서는 Container안의 Tabbar를 구현해주시면 swipe으로 구현이 가능합니다. 

class _bottomnaviState extends State<bottomnavi> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 4,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Navi'),
          ),
          body: TabBarView(
            children: [
              Center(
                child: Text("home"),
              ),
              Center(
                child: Text("music"),
              ),
              Center(
                child: Text("apps"),
              ),
              Center(
                child: Text("settings"),
              ),
            ],
          ),
          extendBodyBehindAppBar: true, // add this line

          bottomNavigationBar: Container(
            color: Colors.white, //색상
            child: Container(
              height: 70,
              padding: EdgeInsets.only(bottom: 10, top: 5),
              child: const TabBar(
                //tab 하단 indicator size -> .label = label의 길이
                //tab 하단 indicator size -> .tab = tab의 길이
                indicatorSize: TabBarIndicatorSize.label,
                //tab 하단 indicator color
                indicatorColor: Colors.red,
                //tab 하단 indicator weight
                indicatorWeight: 2,
                //label color
                labelColor: Colors.red,
                //unselected label color
                unselectedLabelColor: Colors.black38,
                labelStyle: TextStyle(
                  fontSize: 13,
                ),
                tabs: [
                  Tab(
                    icon: Icon(
                      Icons.home_outlined,
                    ),
                    text: 'Home',
                  ),
                  Tab(
                    icon: Icon(Icons.music_note),
                    text: 'Music',
                  ),
                  Tab(
                    icon: Icon(
                      Icons.apps,
                    ),
                    text: 'Apps',
                  ),
                  Tab(
                    icon: Icon(
                      Icons.settings,
                    ),
                    text: 'Settings',
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

- Swipe 결과물 입니다.

 

 

 

2. Swipe 불가능 (BottomNavigationBarItem)

class _naviswipeState extends State<naviswipe> {
  int current_index = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('NaviSwipe'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          //현재 index 변수에 저장
          currentIndex: current_index,
          //tap -> index 변경
          onTap: (index) {
            print('index test : ${index}');
            setState(() {
              current_index = index;
            });
          },
          //BottomNavi item list
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home_outlined),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.music_note),
              label: 'Music',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.apps),
              label: 'Apps',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
            ),
          ],
          //selected된 item color
          selectedItemColor: Colors.red,
          //unselected된 item color
          unselectedItemColor: Colors.grey,
          //unselected된 label text
          showUnselectedLabels: true,
          //BottomNavigationBar Type -> fixed = bottom item size고정
          //BottomNavigationBar Type -> shifting = bottom item selected 된 item이 확대
          type: BottomNavigationBarType.shifting,
        ),

        //List item index로 Body 변경
        body: Center(
          child: body_item.elementAt(current_index),
        ));
  }

  List body_item = [
    Text("home"),
    Text("music"),
    Text("apps"),
    Text("settings"),
  ];

이런식으로 구성하시면 쉽게 BottomNavigationBar 제작이 가능합니다. 

 

테마를 변경 할 경우

child를 Theme로 감싸주시면 됩니다.

bottomNavigationBar: Theme(
  data: Theme.of(context).copyWith(canvasColor: Colors.black),
  child: BottomNavigationBar(

 

type이 fixed 인 경우

Swipe불가 결과물입니다.

 

감사합니다.