[Flutter] BottomSheet 위젯

• 화면 아래쪽에서 올라오는 다이얼로그
• showBottomSheet() 및 showModalBottomSheet()의 builder 속성에 지정한 위젯을 화면 아래쪽에서 올라오도록 보여줌
  • showModalBottomSheet()는 사용자가 Bottom Sheet 외부를 터치하면 Bottom Sheet가 자동으로 닫히지만, showBottomSheet()는 사용자가 Bottom Sheet 외부를 터치해도 Bottom Sheet가 닫히지 않음
• 다이얼로그를 닫기 위해서는 닫히게 하려면, Navigator.of(context).pop()을 호출하면 됨

 

import 'package:flutter/material.dart';

void main(){
  runApp(BottomSheetApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'myApp1',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue)
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Bottom Sheet Sample'),),
        body: MyBottomSheet(),
      ),
    );
  }
}

// 새로운 클래스
class MyBottomSheet extends StatelessWidget {
  const MyBottomSheet({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('show bottom sheet'),
        onPressed: () {
          // 이벤트 핸들러 처리
          //showBottomSheet(context: context, builder: builder)
          showModalBottomSheet(context: context, builder: (context) {

            return Container(
              child: Column(
                children: [
                    ListTile(
                      leading: Icon(Icons.add),
                      title: Text('Add Item'),
                      onTap: () {
                        Navigator.of(context).pop();
                      },
                    ),
                  ListTile(
                    leading: Icon(Icons.remove),
                    title: Text('Remove Item'),
                    onTap: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              ),
            );
          });
        },
      ),
    );
  }
}