[Flutter] 탭바 디자인 변경하기 (TabBar, TabBarView)

✍ 탭바 디자인 변경하기

 TabBar, TabBarView, Tab, DefaultTabController 를 사용하여 구현한 탭바의 디자인과 관련된 인자를 소개하려 한다.

 

 

✍ TabBar

TabBar({  
  Key? key,
  required List  tabs,
  TabController? controller,
  bool isScrollable = false,
  EdgeInsetsGeometry? padding,
  Color? indicatorColor,
  bool automaticIndicatorColorAdjustment = true,
  double indicatorWeight = 2.0, 
  EdgeInsetsGeometry indicatorPadding = EdgeInsets.zero, 
  Decoration? indicator,  
  TabBarIndicatorSize? indicatorSize,
  Color? labelColor,
  TextStyle? labelStyle, 
  EdgeInsetsGeometry? labelPadding, 
  Color? unselectedLabelColor, 
  TextStyle? unselectedLabelStyle,  
  DragStartBehavior dragStartBehavior = DragStartBehavior.start, 
  MaterialStateProperty ? overlayColor,  
  MouseCursor? mouseCursor,   
  bool? enableFeedback, 
  void Function(int)? onTap, 
  ScrollPhysics? physics,  
  InteractiveInkFeatureFactory? splashFactory, 
  BorderRadius? splashBorderRadius,
})

 

 

 

 

😶 indicator 와 관련된 인자

선택한 탭에 따라 이동하는 박스를 indicator 라고 부른다.

TabBar({
  Color? indicatorColor,
  bool automaticIndicatorColorAdjustment = true,
  double indicatorWeight = 2.0, 
  EdgeInsetsGeometry indicatorPadding = EdgeInsets.zero,
  Decoration? indicator,  
  TabBarIndicatorSize? indicatorSize,
})

indicator 와 관련된 인자는 위와 같이 4가지가 있는데,

indicatorColor 는 indicator 의 색상을 의미하고, indicatorWidght 는 indicator 의 두께를 말한다. indicatorPadding 은 

말 그대로 indicator 주위의 padding 값을 의미한다.

automaticIndicatorColodAdjustment 가 true 이면 indicatorColor 값이 null 일때, 자동으로 indicator 의 색상을 결정한다. 만약 ( automaticIndicatorColodAdjustment == false && indicatorColor == null ) 이면 실행했을 때 indicator 가 없는 것처럼 보인다.

 

 

예시)

 

TabBar(

    indicatorColor: Colors.brown,

    indicatorWeight: 8.0,

    indicatorPadding: EdgeInsets.only(bottom: 8.0),

);

 

 

 

 

😎 indicator

기본 indicator 의 모양은 직사각형 박스(UnderlineTabIndicator)이다. 이 모양 말고 Decoration 타입이면 어떤 것이든 사용할 수 있다.

 

예시) UnderlineTabIndicator

TabBar(
  indicator: UnderlineTabIndicator(
    borderSide: BorderSide(color: Colors.red, width: 5.0),
  ),
  ...
);

 

 

예시) BoxDecoration

TabBar(
  indicator: BoxDecoration(
    color: Colors.deepPurple,
    borderRadius: BorderRadius.all(Radius.circular(16.0)),
  ),
  ...
);

 

 

😎 indicatorSize

indicatorSize 는 TabBarIndicatorSize.tab 와 TabBarIndicatorSize.label 인자가 있는데,

TabBarIndicatorSize.tab 는 탭 하나의 전체 width 사이즈만큼 차지하고, TabBarIndicatorSize.label 는 탭의 요소에 맞게 with 사이즈가 결정된다.

 

 

 

 

 

😶 Label 

TabBar({
  Color? labelColor,
  TextStyle? labelStyle, 
  EdgeInsetsGeometry? labelPadding, 
  Color? unselectedLabelColor, 
  TextStyle? unselectedLabelStyle,
})

labelColor 와 labelStyle 은 탭바가 선택됐을 때 탭의 요소(글자, 아이콘)의 색상과 글자 스타일이다.

unselectedLabelColor 와 unselectedLabelStyle 은 선택되지 않은 탭의 요소(글자, 아이콘)의 색상과 글자 스타일이다.  만약 TabBar 의 tabs 인자에 Tab() 위젯이 아닌 다른 위젯을 사용할 시 다른 위젯에 글자 색상과 폰트 등을 정하면 labelColor, labelStyle, unselectedLabelColor, unselectedLabelStyle 이 적용되지 않을 수 있다. labelPadding 은 탭 하나하나의 주의 패딩값을 줄 수 있다.

 

 

예시)

TabBar(
  unselectedLabelColor: Colors.black,
  unselectedLabelStyle: TextStyle(color: Colors.black),
  labelStyle: TextStyle(color: Colors.purple, fontWeight: FontWeight.bold),
  labelColor: Colors.purple,
  ...
)

 

 

 

😶 isScrollable

TabBar({
  bool isScrollable = false,
})

isScrollable 가 true 면 옆으로 스크롤 할 수 있게 해 준다. false 이면 스크롤이 불가능하며 tabs 인자에 탭들이 많을 때 요소가 차지하는 공간이 없으면 뭉개질 수 있다.

 

isScrollable 가 true 일 때, tabs 가 적으면 중앙에 정렬하게 된다. 

 

isScrollable : true

 

 

이럴 경우 중앙에 정렬하지 않고 오른쪽에 맞추거나 왼쪽에 맞추고 싶을 때가 있다. 그럴 때는 PreferredSize 위젯으로 AppBar 의 bottom 을 감싸 Row 의 mainAxisAlignment 로 방향을 조절하면 된다.

 Scaffold(
  appBar: AppBar(
    title: const Text('TabBar Widget'),
    bottom: PreferredSize(
      preferredSize: Size.fromHeight(80.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          TabBar(
            isScrollable: true,
            controller: _tabController,
            tabs: [
              ...
            ],
          ),
        ],
      ),
    ),
  ),
  ...
);

 

 

 

✍ TabBarView 의 physics

탭바에 의해 선택된 화면의 스크롤 모양을 TabBarView 의 physics 인자로 정할 수 있다. 만약 NeverScrollableScrollPhysics 인 경우 사용자가 좌우로 스크롤로 탭바를 선택하지 못하고 탭을 직접 클릭해야 탭을 선택할 수 있다.

인자(physics)	설명
NeverScrollableScrollPhysics	사용자가 스크롤 불가능하다.
AlwaysScrollableScrollPhysics	항상 사용자가 스크롤을 가능하게 하고 스크롤 모양은 기종 기본값을 따른다.
BouncingScrollPhysics	IOS 기본 스크롤 모양으로, 튕기는 모양이다.
ClampingScrollPhysics	AOS 기본 스크롤 모양이다.
PageScrollPhysics	페이지 단위로 스크롤할 수 있다.

TabBarView(
  physics: NeverScrollableScrollPhysics(),
  ...
)