TabBar / TabBarView

Sunny·2022년 5월 31일

TabBar

위와 같은 이미지처럼 사용!
class에 TickerProviderStateMixin을 믹스인 시킴!

예시를 통해 하나씩 보면

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  //TextEditingController homeSearchController = TextEditingController();
  TabController? tabController;
  
  void initState() {
    super.initState();
    tabController = TabController(vsync: this, length: 3);
  //length는 탭의 갯수라고 생각하자
  }
   TabBar(
   	controller: tabController,
              tabs: [
                Tab(text: "Movie"),
                Tab(text: "Drama"),
                Tab(text: "Animation"),
              ],
              indicatorColor: BogoColor.bogoWhite,
              // 표시색상
            ),
  
 } 

위의 에처럼 쉽게 사용해볼 수 있다.

TabBarView

맨위 이미지처럼 movie, drama, animation을 클릭했을 때 하단에 나오는 View!

TabBarView(
controller: tabController,
children: []),
//children 안에 개수는 tabbar의 개수와 같아야함
profile
즐거움을 만드는 사람

0개의 댓글