[Flutter] TopNavigationBar(DefaultTabController), TabBar

https://api.flutter.dev/flutter/material/DefaultTabController-class.html

DefaultTabController class - material library - Dart API

 

DefaultTabController로 MaterialApp다음 감싸준 후,

length paramter에 탭의 개수를 정해준다.

 

AppBar내에 bottom parameter안에 TabBar위젯를 설정해주고,

Tab위젯을 넣는다.

 

내부에 보여줄 TabBarView위젯을 넣고, children parameter안에 해당 위젯페이지를 넣어준다.

 

DefaultTabController(
  length: 탭 개수,
  
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: List<Tab>,
      )
    ),
    body: TabBarView(
      children: 
    ),
  )
);

 

 

TabBar

스크롤을 가능하게 하려면,

isScrollable: true,

 

공백을 없애려면

tabAlignment: TabAlignment.start,

 

 

탭바 주위에 색을 입히고 싶은 경우

핵심은 indicatorSize 파라메터를 설정해주어야 한다.

indicatorSize

1. TabBarIndicatorSize.tab 으로 하면 tab크기 만큼.

2. TabBarIndicatorSize.label 로 하면 label글자 크기 만큼.

TabBar(
  tabs: myTabs,
  indicatorColor: Colors.white, // 탭 선택시 아래의 줄 색상
  indicatorWeight: 2.0, // 탭 선택시 아래의 줄 두께
  labelColor: Colors.white, // 선택된 탭의 글자 색상
  unselectedLabelColor: Colors.grey, // 선택되지 않은 탭의 글자 색상
  labelStyle: TextStyle(fontSize: 16), // 선택된 탭의 글자 스타일
  unselectedLabelStyle: TextStyle(fontSize: 16), // 선택되지 않은 탭의 글자 스타일
  // 테두리를 그리기 위한 BoxDecoration 설정
  indicator: BoxDecoration(
    shape: BoxShape.rectangle,
    border: Border(
      top: BorderSide(color: Colors.blue, width: 2.0), // 상단 테두리 색상 및 두께
      bottom: BorderSide(color: Colors.blue, width: 2.0), // 하단 테두리 색상 및 두께
    ), // or Border.all(color: Colors.red)
  ),
),

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Theme.of(context).colorScheme.primaryContainer)
  ),
  child: TabBar(
    indicator: BoxDecoration(
      shape: BoxShape.rectangle,
      border: Border.all(
        color: Theme.of(context).colorScheme.primary,
        width: 2.0
      )
    ),
    indicatorSize: TabBarIndicatorSize.tab,
    tabs: tabList,

  ),
)

 

TabBarView

스크롤을 안되게 하려면,

physics: NeverScrollableScrollPhysics(),