Flutter 앱을 개발하다 보면 하나 이상의 BottomSheet를 동시에 사용해야 하는 경우가 있습니다. 예를 들어, 사용자가 여러 가지 옵션을 선택하는 다중 선택 BottomSheet를 표시해야 할 수 있습니다. 이 글에서는 Flutter에서 여러 개의 BottomSheet를 동시에 사용하는 방법에 대해 알아보겠습니다.
BottomSheet 소개
BottomSheet는 화면 하단에서 올라오는 모달한 형태의 UI 요소입니다. 일반적으로 어떤 작업을 완료하거나 선택을 할 때 사용됩니다. BottomSheet를 띄우면 기존 화면 위에 올라와서 부분적으로 보이며, 사용자는 BottomSheet가 닫히기 전까지 다른 부분에 접근할 수 없습니다.
여러 개의 BottomSheet 사용하기
Flutter에서 여러 개의 BottomSheet를 동시에 사용할 때는 showModalBottomSheet나 showBottomSheet 메서드를 사용하여 각각의 BottomSheet를 구성하고 표시할 수 있습니다. 아래는 간단한 예제 코드입니다.
// 첫 번째 BottomSheet
void _showFirstBottomSheet(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.access_alarm),
title: Text('Alarm'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
onTap: () {},
),
],
),
);
},
);
}
// 두 번째 BottomSheet
void _showSecondBottomSheet(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.camera),
title: Text('Camera'),
onTap: () {},
),
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
onTap: () {},
),
],
),
);
},
);
}
위의 예제 코드에서 _showFirstBottomSheet와 _showSecondBottomSheet 함수는 각각 첫 번째와 두 번째 BottomSheet를 표시합니다.
주의사항
여러 개의 BottomSheet를 동시에 사용할 때 주의해야 할 점은 사용자 경험이 지나치게 복잡하지 않도록 하는 것입니다. BottomSheet는 사용자 인터페이스를 어둡게 만들어서 현재 사용자가 다른 부분을 사용하지 못하게 하므로, 여러 개를 동시에 사용할 때는 정확한 사용자 행동 및 화면의 흐름을 고려해야 합니다.
이상적으로는 BottomSheet를 사용하는 것이 사용자에게 혼란스럽지 않으면서도 필요한 작업을 쉽게 수행할 수 있게 도와주는 것입니다.
이제 여러 개의 BottomSheet를 동시에 사용하는 방법에 대해 알아보았습니다. 만약 이에 대해 추가적인 질문이 있거나 더 궁금한 점이 있다면 언제든지 물어보세요!