플러터에서 showModalBottomSheet 위젯 사용방법 및 옵션 가이드

 

플러터(Flutter)에서 showModalBottomSheet는 화면 하단에서 나타나는 모달 바텀 시트(Modal Bottom Sheet)를 쉽게 구현할 수 있게 해주는 함수입니다.

이 위젯은 보통 추가 정보를 제공하거나 사용자와의 상호작용을 위해 사용됩니다.

이번 포스트에서는 showModalBottomSheet의 기본 사용법과 다양한 옵션을 설명하겠습니다.

 

1. showModalBottomSheet 기본 사용법

showModalBottomSheet는 플러터의 내장 함수로, 지정된 컨텍스트와 빌더 함수를 통해 모달 바텀 시트를 표시합니다.

기본적인 사용법은 다음과 같습니다.

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      color: Colors.white,
      child: Center(
        child: Text('여기에 내용을 추가하세요'),
      ),
    );
  },
);

이 예제에서는 간단한 컨테이너와 텍스트 위젯을 포함하는 모달 바텀 시트를 표시합니다.

2. showModalBottomSheet의 주요 옵션

2.1 context

모달 바텀 시트를 표시할 때 필요한 BuildContext입니다. 보통 현재 위젯의 context를 사용합니다.

2.2 builder

모달 바텀 시트의 내용을 정의하는 함수입니다. 이 함수는 BuildContext를 인자로 받아 위젯을 반환합니다.

2.3 isScrollControlled

모달 바텀 시트가 화면 전체를 덮을 수 있도록 할지 여부를 결정합니다. 기본값은 false로, 시트는 콘텐츠의 크기에 맞게 자동으로 크기를 조정합니다. true로 설정하면 시트가 화면 전체를 덮을 수 있습니다.

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (BuildContext context) {
    return FractionallySizedBox(
      heightFactor: 0.9,
      child: Container(
        color: Colors.white,
        child: Center(
          child: Text('높이 조정된 모달 바텀 시트'),
        ),
      ),
    );
  },
);

2.4 backgroundColor

모달 바텀 시트의 배경색을 설정합니다. 기본값은 null로, 시스템에서 제공하는 기본 스타일이 적용됩니다.

showModalBottomSheet(
  context: context,
  backgroundColor: Colors.blueGrey,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      child: Center(
        child: Text('커스텀 배경색 모달 바텀 시트'),
      ),
    );
  },
);

2.5 shape

모달 바텀 시트의 모양을 정의하는 데 사용됩니다. RoundedRectangleBorder 등을 사용하여 모서리를 둥글게 설정할 수 있습니다.

showModalBottomSheet(
  context: context,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(top: Radius.circular(20.0)),
  ),
  builder: (BuildContext context) {
    return Container(
      height: 200,
      child: Center(
        child: Text('둥근 모서리 모달 바텀 시트'),
      ),
    );
  },
);

2.6 isDismissible

모달 바텀 시트를 탭하여 닫을 수 있는지 여부를 결정합니다. 기본값은 true로, 탭하면 닫힙니다.

showModalBottomSheet(
  context: context,
  isDismissible: false,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      child: Center(
        child: Text('탭하여 닫을 수 없는 모달 바텀 시트'),
      ),
    );
  },
);

2.7 enableDrag

모달 바텀 시트를 드래그하여 닫을 수 있는지 여부를 결정합니다. 기본값은 true입니다.

showModalBottomSheet(
  context: context,
  enableDrag: false,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      child: Center(
        child: Text('드래그하여 닫을 수 없는 모달 바텀 시트'),
      ),
    );
  },
);

3. 사용 예시

다음은 showModalBottomSheet를 사용하여 옵션과 기능을 종합적으로 적용한 예제입니다.

void _showModal(BuildContext context) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    backgroundColor: Colors.white,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(20.0)),
    ),
    builder: (BuildContext context) {
      return DraggableScrollableSheet(
        expand: false,
        builder: (BuildContext context, ScrollController scrollController) {
          return SingleChildScrollView(
            controller: scrollController,
            child: Column(
              children: [
                ListTile(
                  leading: Icon(Icons.photo),
                  title: Text('사진'),
                  onTap: () {
                    // 액션
                  },
                ),
                ListTile(
                  leading: Icon(Icons.music_note),
                  title: Text('음악'),
                  onTap: () {
                    // 액션
                  },
                ),
                ListTile(
                  leading: Icon(Icons.videocam),
                  title: Text('비디오'),
                  onTap: () {
                    // 액션
                  },
                ),
              ],
            ),
          );
        },
      );
    },
  );
}

이 예제에서는 isScrollControlled를 사용하여 모달 시트가 전체 화면을 덮을 수 있도록 하고, DraggableScrollableSheet을 사용하여 사용자가 모달 시트를 드래그하여 스크롤할 수 있도록 설정했습니다.

결론

플러터의 showModalBottomSheet는 다양한 옵션을 제공하여 모달 바텀 시트를 쉽게 구현할 수 있게 해줍니다.

이 위젯을 사용하면 사용자가 추가 정보나 선택 항목을 간편하게 접근할 수 있습니다.

이 블로그 포스트가 showModalBottomSheet의 사용 방법과 옵션을 이해하는 데 도움이 되길 바랍니다.

다양한 옵션을 활용하여 더 나은 사용자 경험을 제공하세요!

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱