[Flutter] 플러터 #10 - Bottom Sheet

하단 시트(Bottom Sheet)를 구현하는 예제에 관한 글입니다.

하단 시트는 화면의 아래에 나타나는 패널로, 지속적으로 표시되는 지속 하단 시트와 모달 형태로 표시되는 모달 하단 시트 두 가지 버전을 제공합니다.

 

import 'package:flutter/material.dart';

class BottomWidget extends StatefulWidget {
  @override
  _BottomWidgetState createState() => _BottomWidgetState();
}

class _BottomWidgetState extends State<BottomWidget> {
  bool _showBottomSheet = false;

  void _toggleBottomSheet() {
    setState(() {
      _showBottomSheet = !_showBottomSheet;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('하단시트'),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              onPressed: _toggleBottomSheet,
              child: Text('지속 하단 시트'),
            ),
            ElevatedButton(
              onPressed: () {
                showModalBottomSheet<void>(
                  context: context,
                  builder: (context) => _BottomSheetContent(),
                );
              },
              child: Text('모달 하단 시트'),
            ),
          ],
        ),
      ),
      bottomSheet: _showBottomSheet ? _BottomSheetContent() : null,
    );
  }
}

'BottomWidget 클래스는 StatefulWidget을 상속하며, _showBottomSheet 변수를 사용하여 지속 하단 시트의 표시 여부를 제어합니다. _toggleBottomSheet 함수는 _showBottomSheet 변수의 값을 토글하여 지속 하단 시트의 표시 상태를 변경합니다.

 

'build 메서드에서는 Scaffold 위젯을 생성하여 앱의 뼈대를 구성합니다. appBar는 상단의 앱 바를 나타내며, body는 중앙에 버튼을 포함한 컬럼을 배치합니다. 첫 번째 버튼은 onPressed 콜백에서 _toggleBottomSheet 함수를 호출하여 지속 하단 시트의 표시 상태를 변경합니다. 두 번째 버튼은 onPressed 콜백에서 showModalBottomSheet 함수를 사용하여 모달 하단 시트를 표시합니다.

 

또한, bottomSheet 속성을 사용하여 _showBottomSheet 변수에 따라 지속 하단 시트의 내용을 표시하거나 숨깁니다.

 

class _BottomSheetContent extends StatelessWidget {
  final List<String> items = ['채형원', '차은우', '변백현', '이민혁', '안효섭', '서강준'];

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 300,
      child: Column(
        children: [
          SizedBox(
            height: 70,
            child: Center(
              child: Text(
                'Header', // 하단 시트의 제목
                textAlign: TextAlign.center, // 텍스트의 위치 조정
              ),
            ),
          ),
          const Divider(thickness: 1), // 구분선
          Expanded(
            child: ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(items[index]),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

_BottomSheetContent 클래스는 StatelessWidget을 상속하며, 하단 시트의 내용을 구성합니다. items 변수는 리스트뷰에 표시될 항목들을 저장합니다.

 

build 메서드에서는 SizedBox로 높이가 300인 위젯을 생성하고, Column을 사용하여 하단 시트의 레이아웃을 구성합니다. 첫 번째 자식 위젯은 높이가 70인 SizedBox로 헤더를 표시합니다. Center와 Text 위젯을 사용하여 텍스트를 중앙에 배치하고, textAlign 속성을 사용하여 텍스트의 정렬 방식을 조정합니다.

 

두 번째 자식 위젯은 const Divider로 구분선을 생성합니다.

 

마지막 자식 위젯은 Expanded로 감싸진 ListView.builder입니다. itemCount 속성은 items 리스트의 길이로 설정되고, itemBuilder 속성은 각 항목에 대한 ListTile 위젯을 생성합니다. 각 ListTile은 title 속성을 통해 항목의 텍스트를 표시합니다.

 

이제 이 코드를 사용하여 하단 시트를 구현할 수 있습니다. BottomWidget을 통해 지속 하단 시트와 모달 하단 시트를 테스트하고, BottomSheetContent를 활용하여 하단 시트의 내용을 구성할 수 있습니다.

 

다음은 하단 시트의 실행 화면입니다.

지속 하단 시트 실행 화면

모달 하단 시트 실행 화면