[flutter] BottomSheet와 다이얼로그 창 비교하기

14 Dec 2023

flutter

이번에는 Flutter 앱 개발 시 자주 사용되는 BottomSheet와 다이얼로그 창을 비교해보려고 합니다. 두 요소는 사용자와 소통하기 위한 중요한 인터페이스 요소입니다.

BottomSheet

먼저, BottomSheet에 대해 알아보겠습니다. BottomSheet는 화면의 하단에서 나타나는 숨겨진 컨텐츠를 표시하기 위해 사용됩니다. 일반적으로 스와이프 동작이나 버튼 클릭과 같은 사용자 동작에 의해 나타나며, 임시로 추가 정보를 보여주거나 설정을 변경하는 데 사용됩니다.

showBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      child: Text('이곳에 추가 정보를 넣을 수 있습니다.'),
    );
  },
);

다이얼로그 창

이제 다이얼로그 창에 대해 살펴보겠습니다. 다이얼로그 창은 앱의 작업 결과를 확인하거나 사용자로부터 추가 정보를 입력받기 위해 사용됩니다. BottomSheet보다는 더 강력한 모달 형태의 다이얼로그 창으로, 사용자의 입력을 기다리거나 중요한 결정을 내리는 데 사용됩니다.

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('경고'),
      content: Text('이 작업을 계속하시겠습니까?'),
      actions: [
        TextButton(
          child: Text('취소'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        TextButton(
          child: Text('확인'),
          onPressed: () {
            // 작업 수행
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

결론

BottomSheet와 다이얼로그 창은 각각 다른 상황에 적합하게 사용됩니다. BottomSheet는 임시적인 정보나 설정을 표시하는 데 사용되며, 다이얼로그 창은 사용자의 결정이나 입력을 요구하는 데 사용됩니다. 이러한 차이점을 이해하고 적절히 사용함으로써 Flutter 앱의 사용자 경험을 향상시킬 수 있습니다.

이상으로 BottomSheet와 다이얼로그 창을 비교하는 내용을 마치겠습니다.

Flutter 공식 문서 - BottomSheet Flutter 공식 문서 - showDialog