Flutter - Weather앱 TabBar 만들기

TabBar는 Controller가 필수 요소이다.

Controller를 정의 하는데는  DefaultController, TabController 두가지 방식이 있다.

TabController는 사용자가 직접 커스텀 해 Animate, 세세한 동작을 직접 정의해서 컨트롤 할때 사용한다.

---

소스코드

TabController를 직접 커스텀 하기 위해 TickerProviderStateMixin을 상속받아주어야한다.

initState 메서드를 통해 위젯이 build되기 전에 tabController를 초기화 시켜준다.

length : 3 // Tab의 갯수이며, Tab의 갯수와 일치 시켜주어야 한다.

vsync : this // TickProvider를 위젯과 동기화 시키기 위해 사용

animationDuration : 애니메이션의 속도를 제어 

class _TabBarExampleState extends State<TabBarExample> with TickerProviderStateMixin {
  late final TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      length: 3,
      vsync: this,
      animationDuration: Duration(milliseconds: 400),
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TabBar Sample'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(
              icon: Icon(Icons.cloud_outlined),
            ),
            Tab(
              icon: Icon(Icons.beach_access_sharp),
            ),
            Tab(
              icon: Icon(Icons.brightness_5_sharp),
            ),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Center(
            child: Text("It's cloudy here"),
          ),
          Center(
            child: Text("It's rainy here"),
          ),
          Center(
            child: Text("It's sunny here"),
          ),
        ],
      ),
    );
  }
}

 

참고자료

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

TabBar class - material library - Dart API