Flutter/Widget] Tabbar

Flutter에는 TabBar가 3가지 정도 존재하는거 같다..

Material - TabBar, BottomNavigationBar

Cupertino - CupertinoTabBar

 

TabBar를 아래에 놓고 TabBarView를 위에 놓으면 BottomNavigationBar와 같은 형태로 구성 할 수 있다.

Material에서 TabBar와 BottomNavigationBar의 사용상 차이라고 하면 스와이프 애니매이션의 유무 정도 인 것 같다..

TbarBar의 경우 좌우 스와이프로 페이지를 넘길 수 있다. 그래서 TabBar에서는 SingleTickerProviderStateMixin을 넣어 줘야 작동을 한다.

 

 

 

다음은 간단한 예제 이다.

	import 'package:flutter/material.dart';
	class TabBarPage extends StatefulWidget {
	const TabBarPage({Key? key}) : super(key: key);
	@override
	State<TabBarPage> createState() => _TabBarPageState();
	}
	class _TabBarPageState extends State<TabBarPage>
	with SingleTickerProviderStateMixin {
	late TabController _tabController;
	final List<Color> palette = [
	Colors.red,
	Colors.green,
	Colors.blue,
	];
	final List<Widget> _tabs = [
	const Tab(icon: Icon(Icons.palette), text: "Red"),
	const Tab(icon: Icon(Icons.palette), text: "Green"),
	const Tab(icon: Icon(Icons.palette), text: "Blue"),
	];
	@override
	void initState() {
	super.initState();
	_tabController = TabController(length: _tabs.length, vsync: this);
	}
	@override
	void dispose() {
	_tabController.dispose();
	super.dispose();
	}
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	body: SafeArea(
	bottom: false,
	child: Column(
	children: [
	TabBar(
	tabs: _tabs,
	controller: _tabController,
	// physics: NeverScrollableScrollPhysics(),
	indicatorColor: Colors.black,
	labelColor: Colors.black,
	unselectedLabelColor: Colors.grey,
	),
	Expanded(
	child: TabBarView(
	controller: _tabController,
	children: [
	Container(color: Colors.red),
	Container(color: Colors.green),
	Container(color: Colors.blue),
	],
	),
	),
	],
	),
	),
	);
	}
	}

view raw tabbar_page.dart hosted with ❤ by GitHub