[Flutter] TabBar, TabBar 정렬

DefaultTabController, TabBar, TabBarView를 사용하여 탭을 넣어보자.

TabBar

DefaultTabController

선택된 탭과 컨텐츠를 동기화하고, 기본 컨텐츠를 유지하려면 TabController가 필요하다.

const DefaultTabController({
    super.key,
    required this.length,
    this.initialIndex = 0,
    required this.child,
    this.animationDuration,
  })

• length: 탭의 개수 (필수 파라미터)

 

TabBar

Tab Widget 목록

• 탭을 문자, 아이콘 또는 하위 Widget을 명시할 수 있다.

Align(
  alignment: Alignment.centerLeft,
  child: SizedBox(
    width: MediaQuery.of(context).size.width / 2,
    child: const TabBar(
      indicatorSize: TabBarIndicatorSize.label,
      labelColor: Color(0xff858383),
      labelStyle: TextStyle(
        fontSize: 18.0,
      ),
      unselectedLabelColor: Color(0xffE0D6D6),
      indicatorColor: Color(0xff858383),
      tabs: [
        Tab(text: '성장기록'),
        Tab(text: '성장일기'),
      ],
    ),
  ),
),

 

TabBarView

각 Tab의 content

• 하위 목록에 포함된 각 Widget이 TabBar의 content에 해당된다.
• 그렇기 때문에 TabView 하위 항목과 Tab 개수가 꼭 일치해야한다. (children length)

TabBar 정렬 (Align)

다음과 같이 탭바를 왼쪽 정렬을 시키려면 SizedBox와 Align Widget으로 TabBar를 감싸면 된다.

const Align(
    alignment: Alignment.centerLeft,
    child: TabBar(
			isScrollable: true,
      indicatorSize: TabBarIndicatorSize.label,
      labelColor: Color(0xff858383),
      labelStyle: TextStyle(
        fontSize: 18.0,
      ),
      unselectedLabelColor: Color(0xffE0D6D6),
      indicatorColor: Color(0xff858383),
      tabs: [
        Tab(text: '성장기록'),
        Tab(text: '성장일기'),
      ],
    ),
  )

SizedBox로 해당 TabBar의 width 길이를 지정한 후, 해당 SizedBox를 왼쪽 정렬을 시키는 것이다.

만약 Tab 개수가 늘어나서 지정한 width 길이를 넘는 경우엔, isScrollable: true 속성을 추가하여 짤리지 않고 가로 scroll이 되도록 지정하면 된다.