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,
      ),
    );
  }
}