[flutter] 화면 아래에서 나타나는 BottomSheet 모달 위젯

플러터 화면 아래에서 나타나는 ModalBottomSheet 위젯

우리는 사용자가 특정 항목의 선택지를 고르는 기능을 다양한 방법으로 제공할 수 있습니다. 그중에서 선택지가 많은 경우 자주 사용되는 ModalBottomSheet 위젯에 대해 알아보겠습니다.

 

만약 항목과 선택지가 적다면 체크박스, 라디오 버튼으로도 충분합니다. 하지만 선택지가 3~5개 이상이거나 항목이 많다면 오히려 사용자의 가독성 떨어뜨릴 수 있다고 생각합니다. 이때 ModalBottomSheet 위젯을 활용하는게 하나의 방법입니다. 

 

우선 구현하려는 ModalBottomSheet 기능은 아래와 같은 모습입니다.

 

기본 코드

showModalBottomSheet 위젯만 추가하면 끝입니다. 참고로 모달 위젯은 onTap, onPressed 등 이벤트 코드 안에 작성하셔야 합니다.

 

모달의 배경색과 높이 크기, 라운딩 처리는 아래 코드의 주석에 해당하는 값을 변경하셔서 사용하시면 됩니다. 너무 간단하죠? 이게 플러터의 매력인 것 같습니다.

GestureDetector(
  onTap: () {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          height: 300, // 모달 높이 크기
          decoration: const BoxDecoration(
            color: Colors.white, // 모달 배경색
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(0), // 모달 좌상단 라운딩 처리
              topRight: Radius.circular(0), // 모달 우상단 라운딩 처리
            ),
          ),
          child: ..., // 모달 내부 디자인 영역
        );
      },
    );
  },
  child: ...,
),

 

여백이 있는 모달 디자인

저는 모달 내부에서 제공하는 정보의 가로 크기가 작을 때 좌우 여백이 있는 모달을 사용하기도 해서 추가해봤습니다.

GestureDetector(
  onTap: () {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          height: 300, // 모달 높이 크기
          margin: const EdgeInsets.only(
            left: 25,
            right: 25,
            bottom: 40,
          ), // 모달 좌우하단 여백 크기
          decoration: const BoxDecoration(
            color: Colors.white, // 모달 배경색
            borderRadius: BorderRadius.all(
              Radius.circular(20), // 모달 전체 라운딩 처리
            ),
          ),
          child: ..., // 모달 내부 디자인 영역
        );
      },
      backgroundColor: Colors.transparent, // 앱 <=> 모달의 여백 부분을 투명하게 처리
    );
  },
  child: ...,
),

 

위의 코드로 여백과 라운딩이 적용된 모달 모습입니다.

 

이번에는 앱 화면 아래에서 스르륵 나타나는 모달창에 대해 구현해봤는데요.

만드시는 앱에 도움이 되었길 바라며 이번 글도 읽어주셔서 감사합니다~😊