플러터 UI에 탭바 구현 해보기

선택된 탭과 콘텐츠를 동기화하고 기본 콘텐츠를 유지하고 싶을 때

    class MyDemo extends StatelessWidget {
      final List<Tab> myTabs = <Tab>[
        Tab(text: 'LEFT'),
        Tab(text: 'RIGHT'),
      ];
    
      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          length: myTabs.length,
          child: Scaffold(
            appBar: AppBar(
              bottom: TabBar(
                tabs: myTabs,
              ),
            ),
            body: TabBarView(
              children: myTabs.map((Tab tab) {
                final String label = tab.text.toLowerCase();
                return Center(
                  child: Text(
                    'This is the $label tab',
                    style: const TextStyle(fontSize: 36),
                  ),
                );
              }).toList(),
            ),
          ),
        );
      }
    }

• DefaultTabController (전환 하고 싶은 화면 수(length)랑 child:scaffold 필요)
• Tabbar: 2개 이상의 tab을 row로 구현되는 위젯.
  • DefaultTabController에 기입한 length와 tab 리스트의 길이가 반드시 같아야함.
  • Appbar의 bottom에 Tabbar 인스턴스를 형성하고 TabBarView와 함께 생성됨.
  • List tabs 필수 ⇒ Tab 인스턴스 안에 icon, text 기입 가능.
• TabbarView: 현재 선택된 탭에 해당하는 위젯을 표시하는 page view
  • property로는 children 을 사용
• 작성자: 강창환