[Flutter] 밑에서 올라오는 팝업 위젯 (Bottom Sheet)

Flutter에서 화면 아래에서 위로 올라오는 팝업을 만들려면 showModalBottomSheet 또는 showBottomSheet을 사용하면 됩니다.

---

1️⃣ showModalBottomSheet (모달 바텀시트)

• 화면을 덮는 반투명 배경이 추가됨 (다른 영역 클릭 시 닫힘)

• 닫을 때는 Navigator.pop(context) 사용

 

🔧 예제: showModalBottomSheet 사용

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(
      home: Scaffold(
        appBar: AppBar(title: const Text("Bottom Sheet 예제")),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showModalBottomSheet(
                context: context,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
                ),
                builder: (context) {
                  return Container(
                    height: 200,
                    padding: const EdgeInsets.all(16),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Text("옵션 선택", style: TextStyle(fontSize: 18)),
                        ListTile(
                          leading: const Icon(Icons.photo),
                          title: const Text("갤러리에서 선택"),
                          onTap: () => Navigator.pop(context),
                        ),
                        ListTile(
                          leading: const Icon(Icons.camera),
                          title: const Text("카메라 촬영"),
                          onTap: () => Navigator.pop(context),
                        ),
                      ],
                    ),
                  );
                },
              );
            },
            child: const Text("바텀시트 열기"),
          ),
        ),
      ),
    );
  }
}

 

✅ 화면을 덮는 효과 + 닫을 때 다른 영역을 터치하면 자동으로 닫힘

---

2️⃣ showBottomSheet (항상 열려 있는 바텀시트)

• Scaffold에서 showBottomSheet을 사용하면 닫기 버튼을 눌러야 닫힘

• 자동으로 닫히지 않음 (Navigator.pop(context)를 호출해야 닫힘)

 

🔧 예제: showBottomSheet 사용

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(
      home: Scaffold(
        appBar: AppBar(title: const Text("Persistent Bottom Sheet")),
        body: Builder(
          builder: (context) => Center(
            child: ElevatedButton(
              onPressed: () {
                showBottomSheet(
                  context: context,
                  builder: (context) {
                    return Container(
                      height: 150,
                      color: Colors.blue[100],
                      child: Center(
                        child: ElevatedButton(
                          onPressed: () => Navigator.pop(context),
                          child: const Text("닫기"),
                        ),
                      ),
                    );
                  },
                );
              },
              child: const Text("바텀시트 열기"),
            ),
          ),
        ),
      ),
    );
  }
}

 

✅ 닫기 버튼을 눌러야 사라지는 바텀시트

✅ 모달이 아니라서 배경을 터치해도 닫히지 않음

---

위젯	특징	닫는 방법	사용 예시
showModalBottomSheet	반투명 배경 + 자동 닫힘	다른 영역 클릭	옵션 선택, 메뉴 팝업
showBottomSheet	항상 열려 있음	버튼 클릭 필요	항상 떠 있는 바텀시트 (예: 음악 플레이어)

 

👉 일반적인 경우 showModalBottomSheet를 사용하면 됩니다! 🚀