4. 프로필 앱 만들기

1. TabController 초기화

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

1. TabBar 구성

• TabBar는 탭을 보여주는 UI 요소입니다. controller는 앞서 선언한 TabController로 연결되어 탭과 탭 내용의 동기화를 처리합니다.

• tabs 배열에 각각 Tab 위젯을 사용하여, 탭에 들어갈 내용을 정의합니다. 여기서는 각각 자동차와 대중교통 아이콘을 사용하는 두 개의 탭이 정의되어 있습니다.

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

1. TabBarView 구성

• TabBarView는 각 탭에 대응하는 내용을 보여주는 영역입니다. children 배열에는 각각의 탭이 선택되었을 때 표시할 내용을 정의합니다.

• 위 코드에서는 탭이 선택될 때마다 서로 다른 색상의 Container가 표시되도록 했습니다.

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

import 'package:flutter/material.dart';

class ProfileTab extends StatefulWidget {
  @override
  _ProfileTabState 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),
      ],
    );
  }
}