BottomSheet

BottomSheet  

 

화면 아래에서 위로 밀려 올라오는 모달 위젯입니다. 다양한 정보를 표시하거나 사용자와 상호작용하는 데 사용할 수 있으며,

 

• 특정 정보를  선택적으로 보고 싶을때
• 필요한 경우에만 정보를 추가로 입력하고 싶을때
• 위 아래로 길게 스크롤하지 않고 현재 화면 내에서 뭔가를 다 처리하고 싶을때 

 

가 있고 큰 틀의 종류는 2가지 가 있습니다.

BottomSheet 종류

• Modal BottomSheet: 화면의 다른 부분과 상호 작용을 차단하고, 사용자의 집중을 특정 작업에 집중시키는 데 적합합니다. 댓글 작성, 메뉴 표시 등에 사용됩니다.
• 지속적 BottomSheet: 화면 하단에 고정되어 다른 화면과 함께 표시됩니다. 추가 정보 제공, 필터링 기능 등에 유용합니다.

 

 

 

2.Bottomsheet 주의사항

• 단순히 정보를 표시하는 용도로 사용하는경우 별 이슈 없음
• 하지만 사용자 입력을 받는 용도로 사용하는 경우 
  persistent(지속적) , Modal 간 다소 많은 차이가 있고 키보드가 입력 항목을 가리는 문제 를 처리해야한다는 상황이 있음 

 

3. BottomSheet 사용 방법

 

3.1 Modal BottomSheet ( 모델 )

• showModalBottomSheet 함수를 사용하여 표시합니다.
• context와 builder 매개변수를 전달해야 합니다.
• builder 매개변수는 BottomSheet의 내용을 정의하는 함수입니다.

3.2 Persistent  BottomSheet (지속적)

• Scaffold 위젯의 bottomSheet 속성을 사용하여 표시합니다.
• BottomSheet 위젯을 직접 사용하여 내용을 정의합니다.

 

 

1. Modal BottomSheet:

• Modal: 화면의 다른 부분과 상호 작용을 차단합니다.
• Focus: 사용자의 집중을 특정 작업에 집중시킵니다.
• Use cases: 댓글 작성, 메뉴 표시, 알림 표시 등

2. Persistent BottomSheet:

• Persistent: 화면 하단에 고정되어 다른 화면과 함께 표시됩니다.
• Additional information: 추가 정보 제공, 필터링 기능 등에 유용합니다.
• Use cases: 제품 정보, 지도 정보, 채팅 목록 등

3. Scrollable BottomSheet:

• Scrollable: 스크롤 가능한 콘텐츠를 표시할 수 있습니다.
• Large content: 많은 양의 정보를 표시해야 하는 경우에 적합합니다.
• Use cases: 뉴스 피드, 목록, 설정 페이지 등

4. Fullscreen BottomSheet:

• Fullscreen: 화면 전체를 덮는 크기로 표시됩니다.
• Immersive experience: 몰입형 경험을 제공합니다.
• Use cases: 이미지 갤러리, 동영상 재생, 게임 등

5. Adaptive BottomSheet:

• Adaptive: 화면 크기와 해상도에 따라 자동으로 조정됩니다.
• Responsive design: 다양한 기기에서 일관된 사용자 경험을 제공합니다.
• Use cases: 다양한 크기의 스마트폰, 태블릿 등에서 사용되는 앱

6. Dismissible BottomSheet:

• Dismissible: 사용자가 스와이프하여 닫을 수 있습니다.
• User interaction: 사용자에게 더 많은 제어 권한을 제공합니다.
• Use cases: 덜 중요한 정보를 표시하거나 사용자가 빠르게 닫을 수 있는 메뉴 등

7. Custom BottomSheet:

• Customizable: 원하는 대로 디자인하고 기능을 추가할 수 있습니다.
• Unique experience: 독창적이고 개성있는 UI를 제공합니다.
• Use cases: 특정 기능을 구현해야 하는 경우, 브랜드 아이덴티티를 표현해야 하는 경우 등

8. Stacked BottomSheet:

• Stacked: 여러 개의 BottomSheet를 위에 쌓아서 표시할 수 있습니다.
• Multi-step processes: 여러 단계의 작업을 수행해야 하는 경우에 유용합니다.
• Use cases: 결제 과정, 계정 설정, 프로필 편집 등

9. Draggable BottomSheet:

• Draggable: 사용자가 드래그하여 위치를 변경할 수 있습니다.
• Flexible layout: 사용자의 요구에 맞게 레이아웃을 조정할 수 있습니다.
• Use cases: 다양한 정보를 동시에 표시하거나 사용자가 원하는 위치에 정보를 배치해야 하는 경우 등

10. Expandable BottomSheet:

• Expandable: 사용자가 끌어올려 크기를 조절할 수 있습니다.
• More content: 더 많은 정보를 표시하거나 숨겨야 하는 경우에 유용합니다.
• Use cases: 제품 상세 정보, 댓글 목록, 설정 메뉴 등

 

 

 

import 'package:flutter/material.dart';

/// Flutter code sample for [showModalBottomSheet].

void main() => runApp(const BottomSheetApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Bottom Sheet Sample')),
        body: const BottomSheetExample(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return Container(
                height: 200,
                color: Colors.amber,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('Modal BottomSheet'),
                      ElevatedButton(
                        child: const Text('Close BottomSheet'),
                        onPressed: () => Navigator.pop(context),
                      ),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),

 

 

 

 

 

Flutter 공식 문서 - BottomSheet: https://api.flutter.dev/flutter/material/BottomSheet-class.html

BottomSheet class - material library - Dart API

 

 

Flutter Widget of the Week - BottomSheet: https://www.youtube.com/watch?v=rJplC6D5uuI