[flutter] BottomSheet 화면에 표시하는 내용 커스터마이징하기

14 Dec 2023

flutter

Flutter는 BottomSheet를 사용하여 화면 하단에서 추가적인 정보를 표시하는 기능을 제공합니다. BottomSheet는 기본적으로 표준 디자인을 제공하지만, 이를 커스터마이징하여 개인적인 스타일이나 기능을 적용할 수 있습니다.

이 글에서는 Flutter 앱에서 BottomSheet 화면에 표시되는 내용을 커스터마이징하는 방법에 대해 알아보겠습니다.

BottomSheet 호출하기

먼저, Flutter 앱에서 BottomSheet를 호출하는 방법에 대해 간단히 살펴보겠습니다.

void _showBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext bc) {
      return Container(
        child: new Wrap(
          children: <Widget>[
            new ListTile(
              leading: new Icon(Icons.music_note),
              title: new Text('Music'),
              onTap: () => {/* 음악을 선택하는 기능 추가 */},
            ),
            // 다른 메뉴 아이템들 추가 가능
          ],
        ),
      );
    },
  );
}

위의 예제에서 _showBottomSheet 함수는 BottomSheet를 호출하고, showModalBottomSheet 함수 내에서 BottomSheet에 표시할 내용을 구성하고 있습니다.

BottomSheet 커스터마이징하기

BottomSheet에 표시되는 내용을 커스터마이징하려면 builder 메서드 내에서 원하는 디자인 및 기능을 적용하면 됩니다. 예를 들어, 커스텀 위젯이나 다양한 아이템들을 포함할 수 있습니다. 또한, 필요에 따라 BottomSheet의 높이나 스타일을 조절할 수도 있습니다.

void _showCustomBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),
    ),
    builder: (BuildContext bc) {
      return Container(
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              leading: new Icon(Icons.photo),
              title: new Text('Photo'),
              onTap: () => {/* 사진을 선택하는 기능 추가 */},
            ),
            ListTile(
              leading: new Icon(Icons.videocam),
              title: new Text('Video'),
              onTap: () => {/* 비디오를 선택하는 기능 추가 */},
            ),
          ],
        ),
      );
    },
  );
}

위의 _showCustomBottomSheet 함수에서 shape 속성을 사용하여 BottomSheet의 모양을 조정하고, Column 위젯을 사용하여 아이템들을 세로로 표시하였습니다.

BottomSheet의 높이를 조절하고 싶다면, isScrollControlled 속성을 true로 설정하여 스크롤 가능한 BottomSheet를 만들 수도 있습니다.

결론

이제 Flutter에서 BottomSheet에 표시되는 내용을 커스터마이징하는 방법을 알아보았습니다. BottomSheet를 사용하여 앱의 사용자 경험을 향상시키고, 개인적인 디자인이나 기능을 적용하여 더욱 다채로운 앱을 만들어 보시기 바랍니다!

참고 자료:
https://api.flutter.dev/flutter/material/showModalBottomSheet.html