플러터 TabBarView, Tabbar 만들기
여러 페이지를 만들고 이동하기 위해 Navigator로 이동하는 것도 있지만, 우선 많이 이용하는 탭바를 먼저 알아보겠습니다.
1. 먼저 Tabcontroller를 선언하고, 탭의 갯수를 정해줍니다.
추가로, 클래스 선언할 때, with SingleTickerProviderStateMixin를 추가해야 탭을 눌렀을 때, 애니메이션 동작을 처리할 수있게 합니다. 필수입니다.
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
TabController? tabController;
@override
void initState() {
tabController = TabController(length: 3, vsync: this);
super.initState();
}2. dispose() 함수에서 메모리 누수를 막아야 합니다.
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
@override
void dispose() {
controller.dispose();
super.dispose();
}3. Scafold(appBar, body, bottomNavigationBar) 구조에서
- 1안) body안에 TabBarView를 선언하고, bottomNavigationBar안에 TabBar를 선언
- 2안) appBar>AppBar>bottom>TabBar에 icond을 정의하고, body>TabBarView를 정의
1안)
@override
Widget build(BuildContext context) {
// Scaffold로 appBar, body, bottomNavigation를 선언한다.
return Scaffold(
appBar: AppBar(
title: Text('TabBar Example'),
),
// body에 TabBarView을 bottomNavigationBar에 TabBar 위젯을 넣는다.
body: TabBarView(
children: <Widget>[
FirstApp(),
SecondApp(),
],
controller: controller,
),
bottomNavigationBar: TabBar(
tabs: <Tab>[
Tab(
icon: Icon(Icons.looks_one, color: Colors.blue),
),
Tab(
icon: Icon(Icons.looks_two, color: Colors.blue),
)
],
controller: controller,
),
);
}2안)
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: tabController,
tabs: [
Tab(
text: 'First',
),
Tab(
text: 'Second',
),
Tab(
text: 'Third',
),
],
),
),
body: TabBarView(
controller: tabController,
children: [
Container(
color: Colors.red,
),
WillPopScope(
onWillPop: () async {
tabController?.animateTo(0, duration: Duration(milliseconds: 500),);
return false;
},
child: Container(
color: Colors.yellow,
),
),
WillPopScope(
onWillPop: ()async {
tabController?.animateTo(1, duration: Duration(milliseconds: 500),);
return false;
},
child: Container(
color: Colors.green,
),
),
],
),
);
}
요약
• 탭바로 다양한 내용을 화면 전환으로 보여줄 수 있다.
• 인터넷 예제 소스를 그대로 사용할 경우 오류가 날 때, 원인을 보고 null safety 문제라면 변수에 '?' 를 추가하면 해결
'개발자 넋두리 > Flutter(플러터)' 카테고리의 다른 글
| 플러터, null safety 어려운 분들 해결 방안 (0) | 2023.07.10 |
|---|---|
| Do it! 플러터 목록보여주는 리스트뷰 만들기 (0) | 2023.07.07 |
| Do it! 플러터 위젯 사용법(머티리얼 디자인, 이미지, 폰트..) (0) | 2023.07.05 |
| Do it! 플러터 내부구조, 생명주기 알아보기 (0) | 2023.07.04 |
| Do it! 플러터 개념부터, Dart 기본까지 (0) | 2023.07.03 |
