[flutter] 스택드 위젯을 사용하여 탭바 구현하는 방법

15 Dec 2023

flutter

Flutter에서 스택(Stack) 위젯을 사용하여 탭바(Tab bar)를 구현하는 방법을 알아보겠습니다.

필요한 패키지 가져오기

먼저, 탭바를 구현하기 위해 flutter/material.dart 패키지를 가져와야 합니다.

import 'package:flutter/material.dart';

스택 위젯으로 탭바 구현하기

class TabBarStackWidget extends StatefulWidget {
  @override
  _TabBarStackWidgetState createState() => _TabBarStackWidgetState();
}

class _TabBarStackWidgetState extends State<TabBarStackWidget> {
  int _currentIndex = 0;

  final List<Widget> _tabPages = [
    // 탭 페이지 위젯 추가
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 모든 탭 페이지를 포함하는 컨테이너
          Offstage(
            offstage: _currentIndex != 0,
            child: _tabPages[0],
          ),
          Offstage(
            offstage: _currentIndex != 1,
            child: _tabPages[1],
          ),
          // 추가적인 탭 페이지들도 동일한 방식으로 추가
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        // 하단 탭바 아이템 구성
        items: <BottomNavigationBarItem>[
          // 아이템 추가
        ],
      ),
    );
  }
}

위 코드에서 _tabPages 리스트에 각 탭에 해당하는 위젯을 추가하고, Stack 위젯을 사용하여 각 탭별로 화면을 겹쳐 표시합니다. 그리고 BottomNavigationBar를 사용하여 하단 탭바를 구성합니다.

결론

Flutter에서 스택 위젯을 사용하여 탭바를 구현하는 방법에 대해 알아보았습니다. 이를 응용하여 다양한 탭바 디자인을 구현해 볼 수 있습니다.

더 많은 정보는 Flutter 공식 문서에서 확인할 수 있습니다.