[Flutter] DefaultTabController 개념알고 사용하기

공식문서에 따르면

DefaultTabController는 TabController 를 TabBar 또는 TabBarView 와 공유하는 데 사용되는 상속된 위젯입니다 . 명시적으로 생성된 TabController를 공유하는 것이 편리하지 않을 때 사용됩니다. 그 이유는 탭 바 위젯이 stateless 부모 위젯 또는 다른 부모 위젯에 의해 생성되기 때문입니다.

DefaultTabController

DefaultTabController 개념

• length : 필수로, 아이템의 갯수가 들어가야 한다. 탭바의 갯수를 넣으면 된다.
• child : 필수로, 자식이 들어가야 한다.

 

활용 📚 🐢

home: DefaultTabController(
        length: 4,
        child: Scaffold(
          body: TabBarView(
            physics: const NeverScrollableScrollPhysics(),
            children: [
              Container(),
              Container(),
              Container(),
              Container(),
            ],
          ),
          bottomNavigationBar: const Bottom(),
        ),

반응형

→ 내 경우에는 Scaffold를 넣어주었다. 아래는 TabBarView, 즉 탭바를 누르면 나오는 화면들을 설정해주는 옵션들이다.

• TabBarView : 탭바를 누르면 화면에 나오는 뷰를 의미한다.
• physics : 앱에서 슬라이드를 하여 좌우로 페이지 이동을 가능하게 할 것인지에 대한 설정이다.
  • NeverScrollableScrollPhysics : 위에 대한 설정을 비활성화한다는 의미이다.
• children : 내가 넣어주고자하는 탭바를 의미한다.

 

bottomNavigationBar

• bottomNavigationBar : 탭라를 설정하는 옵션이다.

import 'package:flutter/material.dart';

class Bottom extends StatelessWidget {
  const Bottom({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      child: SizedBox(
        height: 50,
        child: TabBar(
          labelColor: Colors.white,
          unselectedLabelColor: Colors.white60,
          indicatorColor: Colors.transparent,
          tabs: [
            fourTab(Icons.home, '홈'),
            fourTab(Icons.search, '검색'),
            fourTab(Icons.save_alt, '목록'),
            fourTab(Icons.list, '더보기'),
          ],
        ),
      ),
    );
  }

  Tab fourTab(clickIcon, name) {
    return Tab(
      icon: Icon(
        clickIcon,
        size: 18,
      ),
      child: Text(
        name,
        style: const TextStyle(fontSize: 9),
      ),
    );
  }
}

코드가 길어 따로 뺐다. 대표적으로 쓰는 것들을 아래와 같이 설명한다.

• TabBar : 네비게이션바의 각 요소들을 설정할 수 있다.
  • onTap : 여기서 사용하지 않았지만, 탭을 눌렀을 때 인덱스값을 얻을 수 있다.
• indicatorColor : 탭바아래에 길쭉한 막대기가 보인다. 이것을 사용할 것이면 색깔을 적용하면 되지만, 나처럼 필요없다면 transparent로 하여 투명으로 지정한다. 그리고 사용 안 하면 된다.
• tabs : 나처럼 fourtab로 따로 빼서 tab을 지정해주거나 위에서 탭의 갯수만큼 설정해주면 된다. 똑같은 탭을 여러개만들고 설정 달리 안할 것이라면 나처럼 하는 것을 추천한다.

 

결과물 👇🏻

결과물

 

🔗 참고

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

https://daldalhanstory.tistory.com/258