[ Flutter ] TabBar & TabBarView

tab 기능을 구현하기 위해서

tabBar를 사용

 

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

TabBar class - material library - Dart API

 

---

TabBar

우선 tabBar를 활용하여 tab을 먼저 만들어준다.

 

tab은 tabController로 현재 탭의 위치를 알아야하기 때문에

tabController를 초기화하는 작업을 우선적으로 처리한다.

 

TabController에서 length는 tab의 개수를 의미한다.

vsync는 애니메이션의 프레임 생성과 디스플레이의 동기화를 관리하여 성능을 최적화해준다.

 

tab이 이동할때 애니메이션이 작동되는데 이때문에 필요한 것같다.

• vsync는 애니메이션의 프레임 생성과 디스플레이의 동기화를 관리하여 성능을 최적화합니다.
• vsync: this는 현재 위젯의 상태를 TickerProvider로 사용하여 애니메이션을 제어합니다.
• SingleTickerProviderStateMixin이나 TickerProviderStateMixin을 사용해 State 클래스에 TickerProvider 기능을 추가해야 합니다.

ChatGpt를 활용하여 vsync역할이 무엇인지 확인.

 

class TabComponent extends StatefulWidget {
  const TabComponent({super.key});

  @override
  State<TabComponent> createState() => _TabComponent();
}

class _TabComponent extends State<TabComponent>
    with SingleTickerProviderStateMixin {
  late final TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Column(
        children: [
          TabBar(
            controller: _tabController, 
            tabs: const [
              Tab(text: 'color'),
              Tab(text: 'emotion'),
            ],
          ),
        ],
      ),
    );
  }
}

반응형

---

TabBarView

이후 Expanded안에 TabBarView를 만들어

tab을 눌렀을때 어떠한 내용이 나오는지 해당 내용을 순서에 맞게 넣어주면 된다.

@override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      height: screenSize(context).height,
      child: Column(
        children: [
          TabBar(
            controller: _tabController, 
            tabs: const [
              Tab(text: 'color'),
              Tab(text: 'emotion'),
            ],
          ),
          Expanded(
              child: TabBarView(
            controller: _tabController,
            children: [
              Center(child: Text('tab1')),
              Center(child: Text('tab2'))
            ],
          ))
        ],
      ),
    );
  }

 

이때 여기까지하면 화면에서 tab이 사라지는 경우가 발생하는데

이 경우에는 Expanded는 남은 공간을 전부 처리하는 것으로 되어있는데

부모의 Container의 높이를 정하지 않아서 오류가 발생하게 된다.

 

이를 위해 tab을 Container로 감싸고 높이를 지정해주는데

각 화면의 크기를 고려해서 현재 사용하는 모바일의 높이값을 가져와서 높이를 default로 설정을 해주었다.

return Container(
      padding: EdgeInsets.all(16.0),
      height: screenSize(context).height,

 

여기서 screenSize는 현재 screen의 크기를 가져오는 함수를 따로 만들어서 사용했다.

Size screenSize(BuildContext context) {
  return MediaQuery.of(context).size;
}

 

MediaQuery는 현재 사용자의 화면 크기를 가져온다.

그때마다 MediaQuery를 사용해서 높이를 가져오기 보다는 좀 더 쉽게 사용하기 위해서 함수로 따로 만들어주었다.

728x90