[Flutter]바텀시트 높이의 관한 고찰

바텀시트의 height을 수동으로 조절하여도 일정 사이즈 이상으로는 늘어나지 않았다.
이유가 무엇일까?

바텀시트의 기본 높이 설정

Flutter의 showModalBottomSheet 함수를 사용하여 바텀시트를 생성할 때, 기본적으로 바텀시트의 높이는 내부 컨텐츠의 크기에 따라 결정된다.
하지만 이 높이는 전체 화면 높이의 일정 비율로 제한되며(테스트 결과 절반정도인거같다),
이는 사용자가 바텀시트 뒤의 배경을 볼 수 있도록 하여 사용자 경험을 향상시킨다.
내부 컨텐츠가 이 최대 높이를 초과하는 경우, 바텀시트 내에서 스크롤이 필요하게 된다.

왜 바텀시트의 값은 왜 고정되었을까?

바텀시트가 고정된 최대 높이를 유지하는 이유는 사용자 인터페이스의 일관성과 사용성을 보장하기 위함이 아닐까 싶다.
사용자가 바텀시트와 상호작용하는 동안에도 앱의 다른 부분과의 상호작용을 계속 유지할 수 있도록 하기 위해, 바텀시트는 화면의 전체 높이를 차지하지 않는다.
이 방식은 사용자가 현재 작업을 잃지 않고 추가 정보나 입력을 제공할 수 있게 해준다.

그럼 일정 사이즈에서는 더 키울 수는 없나?

isScrollControlled를 쓰면 된다.
isScrollControlled 매개변수를 true로 설정하면 바텀시트의 동작이 변경된다.
이 설정을 사용하면 바텀시트는 화면의 전체 높이를 사용할 수 있게 되며, 내부 컨텐츠에 따라 바텀시트의 크기가 동적으로 조정될 수 있다.
따라서 내용이 많아서 더 큰 공간이 필요한 경우, 바텀시트는 화면의 더 큰 부분을 차지할 수 있다.

예제 코드는 아래와 같다.

void showSearchPeriodBottomSheet(BuildContext context) {
  final VocaSearchController searchController =
      Get.find<VocaSearchController>();

  showModalBottomSheet(
    context: context,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(16),
        topRight: Radius.circular(16),
      ),
    ),
    // 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀
    isScrollControlled: true,
    builder: (BuildContext context) {
      return Obx(() => Container(
            decoration: const BoxDecoration(
              color: grayScale00,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16),
                topRight: Radius.circular(16),
              ),
            ),
            height: MediaQuery.of(context).size.height * 0.6,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  const SizedBox(height: 20.0),
                  Text(
                    '기간 검색',
                    style: mediumTitle.copyWith(
                      color: grayScale8,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  const SizedBox(height: 10.0),
                  customSearchListTile(
                    searchController: searchController,
                    context: context,
                    title: '전체 기간',
                    isSelected: searchController.tempSearchPeriodOption.value ==
                        '전체 기간',
                    showDivider: true,
                  ),
                  Container(
                    margin: const EdgeInsets.only(top: 8.0, bottom: 16.0),
                    decoration: globalEnabledDivider,
                  ),
                  Expanded(
                    child: Row(
                      children: [
                        Expanded(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              customSearchListTile(
                                searchController: searchController,
                                context: context,
                                title: '2024년',
                                isSelected: searchController
                                        .tempSearchPeriodOption.value ==
                                    '2024년',
                                showDivider: false,
                              ),
                              const SizedBox(height: 8.0),
                              customSearchListTile(
                                searchController: searchController,
                                context: context,
                                title: '2023년',
                                isSelected: searchController
                                        .tempSearchPeriodOption.value ==
                                    '2023년',
                                showDivider: false,
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          child: Padding(
                            padding: const EdgeInsets.only(left: 8.0),
                            child: buildMonthsWrap(),
                          ),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  Row(
                    children: [
                      Expanded(
                        child: PlainButton(
                          text: '취소',
                          textColor: grayScale7,
                          borderColor: grayScale2,
                          customTextStyle: largeBodyMedium,
                          backgroundColor: grayScale00,
                          onPressed: () => Navigator.pop(context),
                        ),
                      ),
                      const SizedBox(width: 8.0),
                      Expanded(
                        child: PlainButton(
                          text: '확인',
                          textColor: primary00,
                          customTextStyle: largeBodyMedium,
                          backgroundColor: primary5,
                          onPressed: () {
                            searchController.confirmSelection();
                            Navigator.pop(context);
                          },
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(
                    height: 20.0,
                  )
                ],
              ),
            ),
          ));
    },
  );
}