[Flutter] showModalBottomSheet 사용방법

서회정

Jan 17, 2026

시간이 남을 때마다 현재 서비스중인 앱의 화면들을 모작하고있다.ㅋ

실무에서 자주 사용되는 패턴을 익힐 수 있어 유익하다.

오늘은 그 중에서도 모달바텀시트를 구현할 수 있는 showModalBottomSheet 사용법에 대해 알아보자.

우선 내가 구현하고싶은 화면은 다음과 같다. 유아이볼에서 캡쳐한 올리브영 브랜드 상품 리스트 페이지이다.

솔팅 버튼을 클릭했을 때 올라오는 바텀시트이다.

바텀시트 내에 있는 정렬 타입을 선택하면 상품 리스트가 변경됨과 함께 솔팅 버튼의 문구도 변경된다.

일단 상태 변경보다 UI 구현을 진행해보겠다.

위젯을 쪼개 사용하기 때문에 해당하는 위젯 상태를 statefulWidget으로 변경한다.

현재 선택된 필터 타입을 정의하고, 옵션을 리스트로 만들었다.


String selectedSort = '인기순';

  final List<String> sortOptions = [
    '인기순',
    '낮은 가격 순',
    '높은 가격 순',
    '신상품순',
    '판매순',
    '리뷰 많은 순',
    '할인율 순',
  ];

모달바텀시트 함수를 작성한다.

여기서 실 서비스와 비슷하게 만드려면 다음 세 가지 속성을 꼭 넣어야한다!

barrierColor → 바텀시트 뒤에 깔리는 반투명 배경색

isDismissible → 바깥 영역을 탭했을때 시트가 닫히는 속성

enableDrag → 드래그로 시트를 닫을 수 있는 속성


void _showSortBottomSheet() {
    showModalBottomSheet(
      context: context,
      elevation: 5,
      backgroundColor: Color(0xFFFFFFFF),
      barrierColor: Color(0x80000000),
      isDismissible: true,
      enableDrag: true,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
      ),
      builder: (BuildContext context) {
        return Container(
          width: double.infinity,
          height: 400,
        );
      },
    );
  }

다음, 버튼에 모달바텀시트 호출 함수명을 작성한다.

일단 임시로 컨테이너를 깔아뒀는데 잘 올라오는 모습을 볼 수 있다.

바깥 배경을 탭하거나 바텀시트 영역을 아래로 드래그하면 전 화면으로 돌아갈 수 있다.

굿!

솔팅 기능은 다음 글에서.