[flutter] BottomSheet 높이 조정하는 방법

14 Dec 2023

flutter

BottomSheet는 사용자에게 추가 정보를 제공하거나 앱의 설정을 조정하는 편리한 방법입니다. 기본적으로 BottomSheet의 높이는 화면의 높이를 고려하여 자동으로 조정됩니다. 그러나 때로는 BottomSheet의 높이를 수동으로 조절해야 하는 경우가 있습니다.

아래에서는 Flutter에서 BottomSheet의 높이를 조절하는 방법에 대해 살펴보겠습니다.

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 300, // 조절하고 싶은 높이로 변경
      child: Center(
        child: Text('내용'),
      ),
    );
  },
);

위 예제는 showModalBottomSheet를 사용하여 BottomSheet를 표시하고, 그 안에 Container를 만들어 높이를 300으로 설정하는 방법입니다. Container 위젯의 height 속성을 사용하여 BottomSheet의 높이를 원하는대로 조절할 수 있습니다.

2. 위젯 밖에서 높이 조정

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        height: MediaQuery.of(context).size.height * 0.8, // 화면 높이의 80%로 설정
        child: Center(
          child: Text('내용'),
        ),
      ),
    );
  },
);

위 두 번째 예제에서는 isScrollControlled 속성을 true로 설정하여 BottomSheet를 전체 화면 높이로 확장합니다. 그 후에 SingleChildScrollView를 사용하여 BottomSheet의 높이를 설정하고, 그 안에 Container를 만들어 원하는 높이를 지정할 수 있습니다.

BottomSheet를 커스텀하게 조정하려면 위와 같은 방법을 사용할 수 있습니다. 이러한 방법을 통해 앱의 사용자 경험을 향상시키고, 더 많은 유연성을 부여할 수 있습니다.

참고 자료

BottomSheet 높이를 조정하는 방법에 대해 알아보았습니다. 튜토리얼이 도움이 되었기를 바라며, 많은 성공을 기원합니다.

1. Widget을 사용하여 높이 조정

2. 위젯 밖에서 높이 조정