19. 플러터 : 탭바 기본

스마트폰에서 네비게이션은 정해진 순서에 따라
깊이를 타고, 다시 말해 안쪽으로 깊숙하게 들어가는 인터페이스를 말한다.
탭은 버튼처럼 누를 수 있는 영역이고
각각의 탭에는 자신만의 고유한 화면(페이지)이 연결되어 있다.
보고 싶은 화면의 탭을 눌러서 정해지지 않는 화면으로 이동하는 인터페이스가 탭바이다.

탭바의 위치는 상단이나 하단, 어느 쪽에도 연결할 수 있다.
첫 번째 예제로는 상단에 탭바를 연결했다.
왼쪽은 최초 실행한 모습이고, 오른쪽은 BOAT 탭을 눌렀을 때의 모습이다.
오른쪽 끝에 보면 보이지 않던 WALK 탭이 나타난 것을 알 수 있다.
탭의 갯수가 많을 경우 옵션에 따라 자동 스크롤 여부를 결정할 수 있다.

정말 단순한 코드.
멋대가리 없이 문자열로만 탭바를 구성한 코드.

탭바 인터페이스에서 중요한 것은 탭과 보여줄 화면의 연결.
컨트롤러의 역할은 다양하겠지만 이들을 자동 연결하는 것이 핵심.
DefaultTabController 클래스는 TabBar와 TabBarView 객체를 연결하는 가장 쉬운 방법 되겠다.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: TabBarSample()));

class TabBarSample extends StatelessWidget {
    final choices = ['PLANE', 'CAR', 'BIKE', 'BOAT', 'BUS', 'TRAIN', 'WALK'];
    
    @override
    Widget build(BuildContext context) {
        // 가장 간단하고 쉽게 사용할 수 있는 기본 탭바 컨트롤러. 탭바와 탭바뷰 연결.
        return DefaultTabController(
            length: choices.length,
            child: Scaffold(
                appBar: AppBar(
                    title: Text('교통 수단'),
                    bottom: TabBar(
                        // map 함수는 리스트의 요소를 하나씩 전달한 결과로 
                        // Iterable 객체를 생성하기 때문에 toList 함수로 변환
                        tabs: choices.map((String choice) {
                            // text는 탭바에 표시할 내용. 지금은 아이콘 없이 문자열만 사용.
                            return Tab(text: choice);
                        }).toList(),
                        isScrollable: true,         // 많으면 자동 스크롤
                    ),
                ),
                // 탭바와 연결된 탣바뷰 생성.
                // 탭바 코드와 똑같이 map 함수로 리스트 생성
                body: TabBarView(
                    children: choices.map((String choice) {
                        return Center(
                            child: Text(
                                choice,
                                style: TextStyle(fontSize: 31),
                            ),
                        );
                    }).toList(),
                ),
            ),
        );
    }
}