Flutter TabBar만들어 보기

이번에는 TabBar를 만들어 볼 것이다

TabBar란 무엇이냐면 사진으로 설명하자면 아래와 같다

 

1. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practice_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/components/practice_tabbar.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            PracticeTabBar(),
          ],
        ),
      ),
    );
  }
}

 

practice_tabbar.dart

import 'package:flutter/material.dart';

class PracticeTabBar extends StatefulWidget {
  const PracticeTabBar({Key? key}) : super(key: key);

  @override
  State<PracticeTabBar> createState() => _PracticeTabBarState();
}

class _PracticeTabBarState extends State<PracticeTabBar> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

 

main.dart는 stl로 자동완성으로 생성하고 practice_tabbar.dart는 stf로 자동완성으로 생성했다

 

2. SingleTickerProviderStateMixin

practice_tabbar.dart

빨간색 부분에 with SingleTickerProviderStateMixin을 추가 작성한다

SingleTickerProviderStateMixin는 한 개의 애니메이션을 가진 위젯을 정의할 때 사용한다. 

extends로 State를 상속받고 있다. 그래서 extends은 불가하기 때문에 with을 사용한다

 

3. initState

practice_tabbar.dart

TabController? _tabController;

@override
void initState() {
  super.initState();
  _tabController = new TabController(length: 2, vsync: this);
}

위의 코드를 넣어주었다

initState는 StatefulWidget 에만 존재하고, 화면을 표시할 때 딱 한 번만 실행되는 함수이다.

vsync는 화면의 상태가 변경될 때, 애니메이션의 싱크를 맞춰준다는 것이다.

 

4. TabBar

TabBar를 그리는 작업을 하겠다

practice_tabbar.dart

return Column(
  children: [
    TabBar(
      controller: _tabController,
      tabs: [
        Tab(icon: Icon(Icons.coffee, color: Colors.black)),
        Tab(icon: Icon(Icons.local_pizza, color: Colors.black)),
      ],
    ),
  ],
);

return Container부분을 위와 같이 맞춰준다

tabs부분은 2개로 설정하였다 왜냐하면 3. initState에서 new TabController() 안에 length를 2로 맞췄기 때문이다

 

5. 실행결과

이렇게 아름다운 TabBar가 완성되었다

 

다음에는 Expanded를 사용해 보도록 하겠다

이 코드 그대로 사용할 것이다.