# 바텀시트 (BottomSheet)

### 바텀시트

<figure><img src="/files/a9Sr2u8mIDdzp293k6kZ" alt=""><figcaption></figcaption></figure>

바텀시트는 앱의 주요 콘텐츠 위에 오버레이로 표시되며, 사용자에게 다양한 옵션을 제공하거나 추가 정보를 제공하기 위해 사용됩니다. 화면 하단에서 위로 슬라이딩되어 나타나며, 사용자의 상호 작용에 따라 확장 및 축소될 수 있습니다.

## 기본 바텀시트

<figure><img src="/files/eNQaKH6JPKl4ofWpuBHD" alt=""><figcaption></figcaption></figure>

기본 바텀시트는 가장 간단한 형태의 바텀시트로, 간단한 목록이나 콘텐츠를 표시할 때 사용됩니다. 사용자는 목록 항목을 탭하여 선택하거나 콘텐츠를 볼 수 있습니다.

```dart
AgnesBottomSheet(
                      child: StandardBottomSheet(),
                    ).showDefault();
```

##

## Open BottomSheet

<figure><img src="/files/ggVkgtAjBgTr6dY1kbrO" alt=""><figcaption></figcaption></figure>

사용자 정의 가능한 오픈 바텀시트로, 필요한 경우 오프셋과 스크롤 컨트롤러를 사용하여 조절할 수 있습니다. 이것은 사용자에게 추가적인 옵션을 제공하거나 상호 작용 가능한 콘텐츠를 표시하는 데 유용합니다.

```dart
AgnesBottomSheet(
                      child: OpenBottomSheet(
                        bottomSheetOffset: offset,
                        scrollController: openBottomSheetController,
                      ),
                    ).showDefault();
```

##

## Sticky BottomSheet

<figure><img src="/files/sQSwU7mjflM144ZWdaKj" alt=""><figcaption></figcaption></figure>

스티키 바텀시트는 바텀시트의 상단에 고정된 헤더를 가집니다. 사용자가 스크롤할 때 헤더는 축소되거나 확장될 수 있으며, 스크롤 시에 상세 정보와 함께 사용자에게 더 많은 콘텐츠를 제공하는 데 사용됩니다. 아래는 스티키 바텀시트의 예제입니다.

```dart
showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        ScrollController scrollController = ScrollController();

                        return DraggableScrollableSheet(
                          initialChildSize: 0.9,
                          minChildSize: 0,
                          maxChildSize: 1,
                          builder: (BuildContext context,
                              ScrollController dragController) {
                            scrollController = dragController;

                            return ListView.builder(
                              controller: scrollController,
                              itemCount: _children.length + 1,
                              itemBuilder: (context, index) {
                                if (index == 0) {
                                  return AnimatedContainer(
                                    duration: const Duration(milliseconds: 300),
                                    width: double.infinity,
                                    height: 100,
                                    decoration: BoxDecoration(
                                      color: Colors.green,
                                      borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(
                                            dragController.offset == 0.8
                                                ? 0
                                                : 40),
                                        topRight: Radius.circular(
                                            dragController.offset == 0.8
                                                ? 0
                                                : 40),
                                      ),
                                    ),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Expanded(
                                          child: Center(
                                            child: Text(
                                              'Header',
                                              style: Theme.of(context)
                                                  .textTheme
                                                  .headlineMedium,
                                            ),
                                          ),
                                        ),
                                        Text(
                                          '  position ${dragController.offset}',
                                          style: Theme.of(context)
                                              .textTheme
                                              .titleLarge,
                                        )
                                      ],
                                    ),
                                  );
                                } else {
                                  final itemIndex = index - 1;
                                  return _children[itemIndex];
                                }
                              },
                            );
                          },
                        );
                      },
                    );
```

바텀시트 위젯을 활용하면 앱의 사용자 경험을 향상시키고 추가 정보를 제공하는 데 유용합니다. 각 유형의 바텀시트는 특정 사용 사례와 디자인 요구 사항에 맞게 선택하여 사용할 수 있습니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.aliothx.net/start/uiux/ui-ux/bottomsheet.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.