탭을 사용하려면 필요한 요소들이 많습니다.
TabBar, Tab, TabBarView, TabController 등을 사용해야합니다.
1. TabController 생성
2. Tab 생성
TabBarView에 각 Tab에 해당하는 컨텐트 구성
1. TabController 생성
탭을 사용하기위해서는 선택된 탭과 컨텐츠 섹션이 동기화가 되어야합니다. 이런 작업을 해주는 것이 TabContoroller 입니다.
사용자가 만들거나, DefaultTabController를 사용해서 자동으로 만들 수 도 있습니다.
DefaultTabController를 사용하는 것이 간단하죠.
DefaultTabController는 TabContoroller과 상속트리에서 관점에서 크게 관련이 없습니다.
DefaultTabController는 StatefulWidget 위젯을 상속 받지만,
TabController는 ChangeNotifier 클래스를 상속 받습니다.
즉 DefaultTabController는 위젯이지만 TabController는 위젯이 아닙니다.
나중에 보시면 DefaultTabController가 TabBar와 TabBarView를 모두 감싸는 형태입니다.
return DefaultTabController(
length: 3,
);
2. Tab 생성
탭을 선택할수 있게 하는 화면이 있어야합니다.
탭들은 TabBar에 Tab을 넣어서 만들고,
다시 TabBar는 AppBar의 bottom에 넣어 줍니다.
icon과 text는 같이 쓸 수 는 있는데, 둘은 child와 같이 쓸 수는 없습니다. 둘중에 하나만 해야합니다.
appBar: AppBar(
title: Text(widget.title),
bottom: TabBar(
tabs: <Widget>[
Tab(
child: Column(children: <Widget>[
Icon(Icons.directions_car),
Text("car")
])),
Tab(icon: Icon(Icons.directions_transit), text: "transit"),
Tab(icon: Icon(Icons.directions_bike), text: "bike")
],
),
),
3. 각각의 탭에 컨텐츠 생성
TabBarView 위젯을 사용합니다.
(이름이 TabBarView여서 TabBar안에 들어갈 것 처럼 느껴지지만, TabBar안에들어가는 것은 Tab입니다.)
TabBarView는 body안에 들어 갑니다.
TabBarView에는 컨텐츠를 보여줍니다.
body: TabBarView(
children: <Widget>[
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike))
],
)),
[전체소스]
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text("Tab demo"),
bottom: TabBar(
tabs: <Widget>[
Tab(
child: Column(children: <Widget>[
Icon(Icons.directions_car),
Text("car")
])),
Tab(icon: Icon(Icons.directions_transit), text: "transit"),
Tab(icon: Icon(Icons.directions_bike), text: "bike")
],
),
),
body: TabBarView(
children: <Widget>[
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike))
],
),
),
),
);
}
}