[flutter] FlatButton을 사용하여 탭바를 만드는 방법은?

26 Dec 2023

flutter

Flutter에서 탭바를 만들기 위해서는 여러 가지 방법이 있지만, FlatButton을 사용하여 간단하게 만들 수 있습니다.

다음은 FlatButton을 사용하여 탭바를 만드는 간단한 예제입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyTabBar(),
    );
  }
}

class MyTabBar extends StatefulWidget {
  @override
  _MyTabBarState createState() => _MyTabBarState();
}

class _MyTabBarState extends State<MyTabBar> with SingleTickerProviderStateMixin {
  TabController _tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TabBar with FlatButton'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            FlatButton(
              onPressed: () {
                _tabController.animateTo(0);
              },
              child: Text('Tab 1'),
            ),
            FlatButton(
              onPressed: () {
                _tabController.animateTo(1);
              },
              child: Text('Tab 2'),
            ),
            FlatButton(
              onPressed: () {
                _tabController.animateTo(2);
              },
              child: Text('Tab 3'),
            ),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Center(child: Text('Tab 1 content')),
          Center(child: Text('Tab 2 content')),
          Center(child: Text('Tab 3 content')),
        ],
      ),
    );
  }
}

위 코드는 TabBar 및 TabBarView 위젯을 사용하여 탭바를 만들고, 각 탭을 FlatButton으로 구현한 예제입니다.

이를 실행하면 간단한 탭바가 생성되고, 각 탭을 누를 때마다 해당 탭 내용이 표시됩니다.

더 다양한 스타일의 탭바를 만들고 싶다면, Tab 위젯을 커스터마이즈하여 사용하거나, DefaultTabController를 활용하여 보다 간편하게 탭바를 구현할 수 있습니다.

이를 참고하여 원하는 스타일의 탭바를 만들어 보세요!

참고: