Flutter / dart 네이게이션 탭바 DefaultTabController/ TabBarView/ TabBar/ Tab 사용법 TIL # 55

안드로이드 네이티브 개발자들에게는 익숙한 바텀 내비게이션 탭 바에 대해서

 

글을 작성하려고 한다.

 

갓러터에서 이와 비슷한 패키지가 있다.

 

따로 외부에서 가져오지 않아도, 

 

내부 패키지에 있기 때문에 그대로 사용해도 된다.

 

바로 DefaultTabController이다.

 

위에 사진은 내가 간단한 프로젝트를 위해 사용한 탭이다.

 

위와 같은 탭바를 코드로 살펴보자.

 

 

---

사용법

 

나같은 경우는 main.dart에서 맨 처음 앱 화면에서 사용하기 때문에

(보통 이런식으로 한다)

 

Scaffold를 DefaultTabController로 감싸준다.

 

return DefaultTabController(
        length: 3,
        child: Scaffold(
        ...
        )
        ...
     );

length는 총 아이템에 개수를 이 메서드에게 알려주는

 

필수 파라미터이다.

 

원하는 탭바의 개수를 넣어준다.

 

 DefaultTabController(
        length: 3,
        child: Scaffold(
            body: TabBarView(
              physics: NeverScrollableScrollPhysics(),
              children: [
                LotteryPage(),
                RecordPage(),
                SettingsPage()
              ],
            ),

TabBarView(탭 바를 제외한 화면에 보이는 뷰)

 

설정을 해준다.

 

physics는 내 앱에서 슬라이드를 하여 옆 페이지로 넘어가는 것을 허용할 것인지

 

말 것인지에 대한 설정이 가능하다.

 

나 같은 경우는 비활성화를 위해 NeverScrollableScrollPhygics() 메서드를 넣어주었다.

 

그러고 나서 미리 만들어둔 페이지들을 넣어준다.(LotteryPage, RecordPage, SettingsPage)

 

위에 페이지는 내가 따로 만들어둔 것이기에 어떤 것을 넣든 상관없다.

 

bottomNavigationBar: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [BoxShadow(
                        color: UsaseColors.mainColor.blurGreen,
                        spreadRadius: 5,
                        blurRadius: 8
                    )]
                ),
                child: ...

TabBarView를 설정했으니,

 

이제 BottomNavigationBar를 설정해보자

 

우선 decoration으로 내비게이션 바의 배경 색을 지정해 주었다.

 

이제 child에 각 탭바의 요소들을 넣어주자.

 

bottomNavigationBar: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [BoxShadow(
                        color: UsaseColors.mainColor.blurGreen,
                        spreadRadius: 5,
                        blurRadius: 8
                    )]
                ),
                child: Padding(
                    padding: EdgeInsets.only(top: size.height * .02.h, bottom: size.height * .06.h),
                    child: TabBar(
                        onTap: (index) {
                          switch (index) {
                            case 0 :
                              setState(() {
                                isClickedLottery = true;
                                isClickedRecord = false;
                                isClickedSettings = false;
                              });
                              break;
                            case 1 :
                              setState(() {
                                isClickedLottery = false;
                                isClickedRecord = true;
                                isClickedSettings = false;
                              });
                              break;
                            case 2 :
                              setState(() {
                                isClickedLottery = false;
                                isClickedRecord = false;
                                isClickedSettings = true;
                              });
                              break;
                          }
                        },
                        indicatorColor: Colors.transparent,
                        tabs: [
                          Tab(
                            child: SvgPicture.asset(IconsUtil.iconsConvert.getSVG(IconsUtil.tabBarIcon.lottery),
                                height: 50.h, color: isClickedLottery ? UsaseColors.iconColor.clicked : UsaseColors.iconColor.unClicked),
                          ),
                          Tab(child: SvgPicture.asset(IconsUtil.iconsConvert.getSVG(IconsUtil.tabBarIcon.record),
                              height: 32.h, color: isClickedRecord ? UsaseColors.iconColor.clicked : UsaseColors.iconColor.unClicked)),
                          Tab(child: SvgPicture.asset(IconsUtil.iconsConvert.getSVG(IconsUtil.tabBarIcon.settings),
                              height: 30.h, color: isClickedSettings ? UsaseColors.iconColor.clicked : UsaseColors.iconColor.unClicked))
                        ]
                    )
                )

TabBar 함수는 네비게이션바의 각 요소들을 설정할 수 있는 함수이다.

 

onTap에서 각 탭을 누를 때, 인덱스 값을 얻을 수 있어,

 

나는 그 인덱스 값에 따른 버튼의 색변화를 위해 다음과 같은 불리언 값을 넣어주었다.

 

indicatorColor는 처음 기본 값으로 탭 바 아래에

 

길쭉한 막대기(파란색)가 지정이 되어 있는데,

 

이 색이 필요없어, 투명색으로 지정해준 것이다.

 

그리고 tabs 함수를

 

통해 안에 Tab메서드를 개수만큼 넣어,

 

그에 맞는 svg이미지와 크기를 넣어주어,

 

TabBar를 완성했다.

 

결과는 다음과 같다.

 

 

두, 세번째 페이지는 대충 만들어 저 모양이다..

 

이런 식으로 탭 바를 완성해서 사용하면 된다.