[flutter] BottomSheet 스크롤 가능하게 만드는 방법

14 Dec 2023

flutter

Flutter에서 BottomSheet는 모달 창을 표시하는 데 유용한 위젯입니다. 그러나 기본적으로 BottomSheet는 내용이 스크롤되지 않습니다. BottomSheet에 스크롤을 추가하는 방법을 알아보겠습니다.

1. SingleChildScrollView 사용

가장 간단한 방법은 BottomSheet 내에 SingleChildScrollView 위젯을 사용하는 것입니다. 이렇게 하면 내용이 화면 크기를 넘어가게 되면 자동으로 스크롤이 가능해집니다.

showBottomSheet(
  context: context,
  builder: (BuildContext builder) {
    return SingleChildScrollView(
      child: Container(
        // 내용 위젯들
      ),
    );
  },
);

2. ListView.builder 사용

만약 BottomSheet에 동적인 목록을 표시해야 한다면 ListView.builder를 사용하여 목록을 표시할 수 있습니다.

showBottomSheet(
  context: context,
  builder: (BuildContext builder) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        // 아이템 위젯 반환
      },
    );
  },
);

3. Custom Scroll Behavior 사용

SingleChildScrollView나 ListView.builder가 원하는 동작을 수행하지 못할 때, CustomScrollView와 SliverList를 사용하여 원하는 동작을 구현할 수 있습니다.

showBottomSheet(
  context: context,
  builder: (BuildContext builder) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              // 아이템 위젯 반환
            },
            childCount: items.length,
          ),
        ),
      ],
    );
  },
);

위에서 소개한 방법들을 사용하여 BottomSheet에 스크롤을 추가할 수 있습니다. 각 상황에 맞게 적절한 방법을 선택하여 사용하시면 됩니다.

1. SingleChildScrollView 사용

2. ListView.builder 사용

3. Custom Scroll Behavior 사용

참고 자료