TabBar, TabBarView

탭바 + 탭바뷰 만들기

 

1. StateFul 위젯으로 만들기

2. TabController 가 필요함 (tabbar - tabbarview연결)

3. mixin을 해줘야 함. SingleTickerProviderStateMixin -with (has, 타입일치를 시켜주는 장점이 있다)

4. TabBarView는 높이가 필요함

import 'package:flutter/material.dart';

class ProfileTab extends StatefulWidget {
  const ProfileTab({Key? key}) : super(key: key);

  @override
  State<ProfileTab> createState() => _ProfileTabState();
}

class _ProfileTabState extends State<ProfileTab>
    with SingleTickerProviderStateMixin {
  TabController? _tabController;

  @override
  void initState() {
    // 최초의 클래스가 뉴 될때 한 번만 실행된다
    super.initState();
    _tabController = new TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        _buildTabBar(),
        Expanded(child: _buildTabBarView()),
      ],
    );
  }

  Widget _buildTabBar() {
    return TabBar(
      controller: _tabController,
      tabs: [
        Tab(
          icon: Icon(Icons.directions_car),
        ),
        Tab(
          icon: Icon(Icons.directions_transit),
        ),
      ],
    );
  }

  Widget _buildTabBarView() {
    return TabBarView(
      controller: _tabController,
      children: [
        Container(
          color: Colors.green,
        ),
        Container(
          color: Colors.red,
        )
      ],
    );
  }
}