플러터 기본기 다지기 - 3 (BottomSheet 위젯)

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();
                    },
                  )
                ],
              ),
            );
          });
        },
      ),
    );
  }
}