[Flutter] 36. BottomSheet 위젯이란?

[Flutter] 36. BottomSheet 위젯이란?

 

1. BottomSheet 위젯이란?

• BottomSheet 위젯이란 화면 아래쪽에서 올라오는 다이얼로그를 의미한다.,
• showBottomSheet() 및 showModalBottomSheet()의 builder 속성에 지정한 위젯을 화면 아래쪽에서 올라오게 보여준다.

 

 

2. 시나리오 코드

 

(1) 기본

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: 'myApp',
      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: (){
          // 이벤트 핸들러 처리
          // showModalBottomSheet(context: context, builder: builder)
          showModalBottomSheet(context: context, builder: (context){
            return Container(
              child: Column(
                children: [
                  
                ],
              )
            );
          });
        }
      ),
    );
  }
}

 

 

(2) leading

leading을 다시 클릭하면 모달이 닫힌다. 이건 onTap() 콜백 함수 덕분!!

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: 'myApp',
      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: (){
          // 이벤트 핸들러 처리
          // showModalBottomSheet(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();
                    },
                  )
                ],
              )
            );
          });
        }
      ),
    );
  }
}