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

 

showModalBottomSheet()은 플러터에서 화면 아래에서 위로 올라오는 시트 형태의 팝업을 생성하는 데 사용하는 함수입니다.

간단한 알림 표시부터 사용자 입력을 받는 복잡한 작업까지 다양한 용도로 활용할 수 있는 유용한 위젯입니다.

이 블로그 글에서는 showModalBottomSheet() 위젯의 사용법과 주요 옵션들을 자세히 살펴보겠습니다.

1. 기본 사용법

 

showModalBottomSheet() 함수를 사용하려면 다음과 같은 두 가지 매개변수를 전달해야 합니다.

• context: 위젯을 호출하는 BuildContext 객체
• builder: 바텀 시트의 내용을 정의하는 함수

showModalBottomSheet(
  context: context,
  builder: (context) => Container(
    height: 200,
    color: Colors.grey,
    child: Center(
      child: Text('바텀 시트 내용'),
    ),
  ),
);

 

위 예시에서는 간단하게 Container 위젯을 사용하여 회색 배경과 가운데 정렬된 텍스트를 가진 바텀 시트를 만들었습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (context) => Container(
                height: 200,
                color: Colors.grey,
                child: Center(
                  child: Text('바텀 시트 내용'),
                ),
              ),
            );
          },
          child: Text('Show Bottom Sheet'),
        ),
      ),
    );
  }
}

2. 주요 옵션

showModalBottomSheet() 함수에는 다양한 옵션을 설정하여 바텀 시트의 모양과 동작을 원하는 대로 조정할 수 있습니다.

• backgroundColor: 바텀 시트의 배경 색상을 지정합니다. 기본값은 Colors.transparent입니다.
• barrierColor: 바텀 시트 뒤에 표시되는 배경 색상을 지정합니다. 기본값은 Colors.black54입니다.
• elevation: 바텀 시트의 그림자 효과 높이를 지정합니다. 기본값은 4입니다.
• shape: 바텀 시트의 모양을 정의하는 ShapeBorder 객체를 지정합니다. 기본값은 RoundedRectangleBorder입니다.
• clipBehavior: 바텀 시트의 자르기 방식을 지정합니다. 기본값은 Clip.hardEdge입니다.
• constraints: 바텀 시트의 최대 크기를 지정합니다.
• isScrollControlled: 바텀 시트 내용이 스크롤 가능 여부를 지정합니다. 기본값은 false입니다.
• useRootNavigator: 바텀 시트를 표시할 네비게이터를 지정합니다. 기본값은 false입니다.
• isDismissible: 사용자가 바텀 시트를 터치하여 닫을 수 있는지 여부를 지정합니다. 기본값은 true입니다.
• enableDrag: 사용자가 바텀 시트를 드래그하여 닫을 수 있는지 여부를 지정합니다. 기본값은 true입니다.
• showDragHandle: 바텀 시트 상단에 드래그 영역을 표시할지 여부를 지정합니다. 기본값은 false입니다.
• useSafeArea: 바텀 시트가 안전 영역(SafeArea) 안에 표시될지 여부를 지정합니다. 기본값은 true입니다.
• routeSettings: 바텀 시트에 대한 라우트 설정을 지정합니다.
• transitionAnimationController: 바텀 시트 애니메이션을 제어하는 AnimationController 객체를 지정합니다.
• anchorPoint: 바텀 시트가 화면에 고정될 위치를 지정합니다.

3. 활용 예시

showModalBottomSheet() 위젯은 다양한 상황에서 활용될 수 있습니다. 몇 가지 예시를 살펴보겠습니다.

• 옵션 선택: 사용자에게 여러 옵션 중 하나를 선택하도록 하는 메뉴 표시
• 데이터 입력: 사용자로부터 입력값을 받는 입력 양식 표시
• 알림 표시: 중요한 정보나 오류 메시지를 사용자에게 알림
• 미리보기: 이미지나 텍스트 콘텐츠를 미리보기

4. 마무리

showModalBottomSheet() 위젯은 플러터에서 다양한 용도로 활용될 수 있는 유연하고 강력한 도구입니다. 

위에서 소개한 기본 사용법과 옵션들을 활용하여 상황에 맞는 바텀 시트를 만들어 보세요.

더 궁금한 점이나 관련 내용이 있다면 언제든지 질문해주세요.

 

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

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

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