깡샘의 플러터&다트 프로그래밍 12-5

탭바 뷰

화면을 구성하는 위젯이다. 탭 버튼을 누르면 그에 대응하는 화면이 출력된다.

기본 구조

• TabBar 위젯으로 탭 버튼을 구성 후 TabBarView 위젯으로 탭 화면을 만든다.
• TabBar 버튼을 눌렀을때 TabBarView에 나오는 화면은 TabController가 자동으로 처리한다.
  • controller 속성에 똑같은 TabController 객체를 지정해야 한다.
• 위젯이 애니메이션 효과를 나타내기 위해서는 SingleTickerProviderStateMix 속성을 with로 설정, TabBarController를 생성할 때 vsync를 this로 설정한다.

탭바 뷰 활용하기

import 'package:flutter/material.dart';

void main() {
  runApp(const ch12_5());
}

class ch12_5 extends StatefulWidget {
  const ch12_5({super.key});
  @override
  TextState createState() => TextState();
}

class TextState extends State<ch12_5> with SingleTickerProviderStateMixin {
  late TabController controller;
  @override
  void initState() {
    super.initState();
    controller = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('test'),
          bottom: TabBar(
            controller: controller,
            tabs: const <Widget>[
              Tab(text: 'One'),
              Tab(text: 'Two'),
              Tab(text: 'Three')
            ],
          ),
        ),
        body: TabBarView(
          controller: controller,
          children: const <Widget>[
            Center(
              child: Text(
                'one screen',
                style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
              ),
            ),
            Center(
              child: Text(
                'second screen',
                style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
              ),
            ),
            Center(
              child: Text(
                'third screen',
                style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
              ),
            ),
          ],
        ),
      ),
    );
  }
}