바텀시트 (BottomSheet)

바텀시트 (Bottom Sheet)은 모바일 앱 및 모바일 프레임워크에서 자주 사용되는 UI 요소 중 하나입니다. 이것은 화면 하단에서 위로 슬라이딩하여 추가 정보를 제공하거나 사용자와 상호 작용할 수 있는 패널 형태의 위젯입니다. 바텀시트를 사용하여 앱 내에서 다양한 작업 및 정보 표시를 구현할 수 있습니다.

바텀시트

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

기본 바텀시트

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

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

Open BottomSheet

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

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

Sticky BottomSheet

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

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

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