Flutter/기본2
탭바와 리스트 만들기 (TabController, SingleTickerProviderStateMixin,
꽃피는봄날
2021. 6. 28. 12:33
import 'package:flutter/material.dart';
import 'package:psw1/sub/firstPage.dart';
import 'package:psw1/sub/secondPage.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Widget Example!!';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
// ↱탭 컨트롤러를 이용해 애니메이션 동작 처리를 제공
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{
// 탭바 컨트롤러 생성하기
late TabController controller;
@override
void initState(){
super.initState();
// ↱탭바의 갯수 ↱탭이 이동했을 때 호출되는 콜백 함수를 어디서 처리할지를 지정
controller = TabController(length: 2, vsync: this);
// 탭컨트롤러 활용하기 addListener()함수는 탭이 이동할 때 호출 됨
controller.addListener(() {
// ↱ 탭이 현재 이동중인지 나타냄
if(!controller.indexIsChanging){
print('이전 index-> ${controller.previousIndex}');
print('현재 index-> ${controller.index}');
}
});
}
@override
void dispose() {
super.dispose();
controller.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('탭바 예제'),
),
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.red),),
],
controller: controller,
),
);
}
}