Tab

Tab

Tab, TabBar, TabBarView, TabController

Tab

A material design TabBar tab. If both icon and text are provided, the text is displayed below the icon.

TabBar

A material design widget that displays a horizontal row of tabs. Typically created as the AppBar.bottom part of an AppBar and in conjunction with a TabBarView.

TabBarView

A page view that displays the widget which corresponds to the currently selected tab. This widget is typically used in conjunction with a TabBar.

TabController

Coordinates tab selection between a TabBar and a TabBarView.

Simple Tab, DefaultTabController

기본 디자인(Material) 을 그대로 사용할땐 DefaultTabController 를 사용해 본다.

	import 'package:flutter/material.dart';
	void main() => runApp(MyApp());
	class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	home: DefaultTabController(
	length: 3,
	child: Scaffold(
	appBar: AppBar(
	bottom: TabBar(
	tabs: [
	Tab(icon: Icon(Icons.hotel)),
	Tab(icon: Icon(Icons.restaurant)),
	Tab(icon: Icon(Icons.store)),
	],
	),
	title: Text('Tabs Demo'),
	),
	body: TabBarView(
	children: [
	Center(child: Text('Hotel', style: const TextStyle(fontSize: 36))),
	Center(child: Text('Restaurant', style: const TextStyle(fontSize: 36))),
	Center(child: Text('Store', style: const TextStyle(fontSize: 36))),
	],
	),
	),
	),
	);
	}
	}

view raw defaulttabcontroller.dart hosted with ❤ by GitHub

Tab

TabController 는 TabBar 와 TabBarView 에 적용한다.

	class MyHomePage extends StatefulWidget {
	@override
	_MyHomePageState createState() => _MyHomePageState();
	}
	class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
	final List<Tab> myTabs = <Tab> [
	Tab(text: 'hotel', icon: Icon(Icons.hotel)),
	Tab(text: 'restaurant', icon: Icon(Icons.restaurant)),
	Tab(text: 'store', icon: Icon(Icons.store)),
	Tab(text: 'hospital', icon: Icon(Icons.local_hospital)),
	Tab(text: 'cafe', icon: Icon(Icons.local_cafe)),
	];
	TabController _tabController;
	@override
	void initState() {
	super.initState();
	_tabController = TabController(
	vsync: this,
	length: myTabs.length
	);
	}
	@override
	void dispose() {
	_tabController.dispose();
	super.dispose();
	}
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text('Tabs Demo'),
	bottom: TabBar(
	isScrollable: true,
	indicatorWeight: 4.0,
	indicatorColor: Colors.green,
	labelColor: Colors.indigo[900],
	labelPadding: EdgeInsets.symmetric(horizontal: 30.0),
	controller: _tabController,
	tabs: myTabs,
	),
	),
	body: TabBarView(
	controller: _tabController,
	children: myTabs.map((Tab tab) {
	return Center(
	child: Text(
	'list of ${tab.text}',
	style: const TextStyle(fontSize: 36),
	),
	);
	}).toList(),
	),
	);
	}
	}

view raw tab.dart hosted with ❤ by GitHub

TabController.animateTo()

Immediately sets index and previousIndex and then plays the animation from its current value to index.

특정 인텍스로 바로 이동.

	child: RaisedButton(
	child: Text('go to first tab'),
	onPressed: () {
	_tabController.animateTo(0, curve: Curves.ease, duration: Duration(seconds: 2));
	},
	),

view raw tabcontroller_animateto.dart hosted with ❤ by GitHub

Reference

https://flutter.dev/docs

https://api.flutter.dev/flutter/material/Tab-class.html

https://api.flutter.dev/flutter/material/TabBar-class.html

https://api.flutter.dev/flutter/material/TabBarView-class.html

https://api.flutter.dev/flutter/material/TabController-class.html

https://material.io/design/components/tabs.html#usage