[flutter] BottomSheet에서 버튼 클릭 이벤트 처리하는 방법

14 Dec 2023

flutter

Flutter 앱에서 BottomSheet를 사용하여 추가 기능을 제공할 수 있습니다. BottomSheet에는 여러 버튼이 포함되어 있을 수 있으며, 이 버튼들의 클릭 이벤트를 처리하는 방법을 알아보겠습니다.

1. BottomSheet 생성

먼저, BottomSheet를 생성하고 여러 버튼을 추가합니다. 예를 들어, 다음과 같이 showModalBottomSheet 함수를 사용하여 BottomSheet를 표시할 수 있습니다.

void _showBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.photo),
            title: Text('사진 선택'),
            onTap: () {
              // TODO: '사진 선택' 버튼 클릭 시 처리할 내용 작성
            },
          ),
          ListTile(
            leading: Icon(Icons.camera),
            title: Text('카메라로 찍기'),
            onTap: () {
              // TODO: '카메라로 찍기' 버튼 클릭 시 처리할 내용 작성
            },
          ),
        ],
      );
    },
  );
}

2. 버튼 클릭 이벤트 처리

위의 예제에서는 각 ListTile 위젯에 onTap 콜백을 제공하여 버튼 클릭 시 처리할 내용을 작성할 수 있습니다. 예를 들어, ‘사진 선택’ 버튼을 클릭했을 때 갤러리에서 이미지를 선택하도록 하는 기능을 추가하고 싶다면 다음과 같이 코드를 작성할 수 있습니다.

onTap: () {
  _selectImageFromGallery();
},

_selectImageFromGallery 함수는 갤러리에서 이미지를 선택하고 해당 이미지를 처리하는 메서드일 수 있습니다.

결론

Flutter에서 BottomSheet의 버튼 클릭 이벤트를 처리하기 위해서는 각 버튼에 onTap 콜백을 추가하여 처리할 내용을 작성하면 됩니다. 이를 통해 BottomSheet를 통해 다양한 기능을 제공하고 사용자와의 상호작용을 가능하게 할 수 있습니다.

참고 자료:

Flutter API 문서 - showModalBottomSheet