(개발) 탭 네비게이션-커스텀

커스텀 이유

우리가 쓰고있는 flutter의 기본 탭바는

TabBar Widget이다. 근데

이걸 사용해서 탭바를 하나 만들어봤는데

제약사항이 너무많다 

기존에 있던걸 바꾸는거보다.

 

내가 직접 만드는게 효율적이다 생각하였다.

 

왼쪽은 내가 커스텀 오른쪽은 기존의 제공하는 코드이다.

 

 

인디케이터 , 패딩값 등 다양하게 내가 못바꿔서 기존 플러터 코드를 이용해 커스텀하였다.

 

일단 나는 360x44 만큼만 탭바의 넓이를 띄우고 싶어서 값을 주었고 

width: 360,
height: 44,

 

 

탭바의 기능을 이용해서 스크롤이 가능하게 하고 탭바 컨트롤을 따로 만들어줬다.

TabBar(
  controller: _tabController,
  isScrollable: true,
  tabAlignment: TabAlignment.start,
  tabs: [
    Tab(
      child: Text(
        '전체',
        textAlign: TextAlign.center,
        style: TextStyle(
          color: Color(0xFF0095F6),
          fontSize: 14,
          fontFamily: 'Pretendard',
          fontWeight: FontWeight.w600,
          height: 1.3,
          letterSpacing: -0.40,
        ),
      ),
    ),
  ],
),

 

 

 

그리고 내가 필요한 정보들을 주고 

1. 인디케이터의 색상

2. 인디케이터의 크기

3. 인디케이터의 패딩

indicatorColor: Color(0xFF0095F6),
indicatorSize: TabBarIndicatorSize.label,
indicatorPadding: EdgeInsets.only(top: 12, bottom: 0),
labelPadding: EdgeInsets.symmetric(horizontal: 8), // 탭 간의 간격을 넓히기 위해 수정된 부분

 

 

 

탭바의 하단을 2정도 주었다. 이 하단2는 인디케이터가 아니냐고 묻는 사람들이 많던데

 

Divider(
  color: Color(0xFFFF0000),
  height: 2.0,
  thickness: 2.0,
),

이밑에 자세하게 보면

희미하게 빨간선이있는 부분이다.