[flutter] 플러터 Row 위젯을 이용한 탭 바 만들기

07 Dec 2023

flutter

플러터(Flutter)를 사용하여 애플리케이션을 개발할 때, 탭 바는 매우 일반적이고 유용한 구성 요소입니다.

이번에는 플러터의 Row 위젯을 사용하여 간단한 탭 바를 만드는 방법을 알아보겠습니다.

Row 위젯으로 탭 바 구성하기

플러터에서 탭 바를 만들기 위해 Row 위젯을 사용할 수 있습니다. Row 위젯은 가로 축으로 자식 위젯을 배열하는 데 사용되며, 탭 바에서 각 탭을 나타내는 버튼을 자식 위젯으로 사용할 수 있습니다.

다음은 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

class CustomTabBar extends StatefulWidget {
  @override
  _CustomTabBarState createState() => _CustomTabBarState();
}

class _CustomTabBarState extends State<CustomTabBar> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        _buildTabButton(0, 'Tab 1'),
        _buildTabButton(1, 'Tab 2'),
        _buildTabButton(2, 'Tab 3'),
      ],
    );
  }

  Widget _buildTabButton(int index, String label) {
    return Expanded(
      child: FlatButton(
        onPressed: () {
          setState(() {
            _currentIndex = index;
          });
        },
        child: Text(
          label,
          style: TextStyle(
            color: _currentIndex == index ? Colors.blue : Colors.black,
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 CustomTabBar라는 StatefulWidget을 정의하고, _CustomTabBarState를 상속한 내부 상태 클래스를 생성합니다.

build 메서드에서는 Row 위젯을 사용하여 각 탭을 나타내는 FlatButton 위젯을 가로로 배열합니다. FlatButton 위젯을 누르면 해당 탭으로 _currentIndex 값을 변경하고, setState를 호출하여 화면을 다시 그립니다.

사용법

위에서 생성한 CustomTabBar 위젯을 사용하려면, 원하는 화면에서 해당 위젯을 불러와서 사용하면 됩니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: CustomTabBar(),
        ),
      ),
    );
  }
}

위의 코드에서는 MyApp이라는 StatelessWidget을 정의하고, MaterialApp과 Scaffold를 사용하여 애플리케이션의 기본 구조를 생성합니다. Center 위젯 내부에 위에서 만든 CustomTabBar 위젯을 불러와서 화면에 표시합니다.

결론

이 글에서는 플러터 Row 위젯을 사용하여 간단한 탭 바를 만드는 방법을 알아보았습니다. 탭 바는 사용자 경험을 향상시키고 애플리케이션의 내비게이션을 간편하게 만드는데 큰 도움이 됩니다. 플러터를 사용하여 탭 바를 구현할 때는 Row 위젯과 FlatButton 위젯을 적절히 활용해보세요.

더 많은 정보를 찾고 싶다면 공식 플러터 웹사이트와 플러터 위젯 카탈로그를 참고하세요.