[flutter] BottomSheet 리스트뷰 만들기

Flutter에서 BottomSheet를 사용하여 사용자에게 리스트뷰를 제공하는 방법에 대해 알아보겠습니다.

BottomSheet 생성

BottomSheet를 생성하려면 showModalBottomSheet 메서드를 사용합니다. 이 메서드는 해당 플랫폼에 맞게 BottomSheet를 나타냅니다.

void _showBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext buildContext) {
      return Container(
        child: ListView(
          children: <Widget>[
            ListTile(
              title: Text('항목 1'),
              onTap: () {
                // 항목 1 선택 시 동작
              },
            ),
            ListTile(
              title: Text('항목 2'),
              onTap: () {
                // 항목 2 선택 시 동작
              },
            ),
            // 추가 항목들
          ],
        ),
      );
    },
  );
}

위 코드에서 showModalBottomSheet 메서드를 호출하면 BottomSheet가 표시됩니다. 리스트뷰를 포함한 컨테이너가 반환되어 BottomSheet 내부에 표시됩니다.

이제 showModalBottomSheet 메서드에 builder 속성을 통해 리스트뷰를 구성합니다.

다양한 항목이 포함된 ListView를 생성하여 BottomSheet 내에 나타낼 수 있습니다. ListTile을 사용하여 각 항목을 표시하고 사용자의 상호작용에 대한 동작을 정의할 수 있습니다.

결론

BottomSheet를 사용하여 간단하게 리스트뷰를 제공하는 방법에 대해 살펴보았습니다. BottomSheet를 통해 손쉽게 사용자와 상호작용할 수 있는 UI를 구현할 수 있습니다.

참고 자료 - Flutter BottomSheet