[flutter] BottomSheet에 키보드 함께 사용하기

14 Dec 2023

Flutter에서 BottomSheet를 사용할 때 키보드와 함께 사용하는 방법을 알아보겠습니다.

BottomSheet란 무엇인가요?

BottomSheet는 화면의 아래에서부터 위로 올라오는 시트로, 주로 추가 정보나 작업을 선택할 수 있는 메뉴를 표시할 때 사용됩니다.

BottomSheet가 표시된 상태에서 사용자가 입력 필드를 탭하면 오버레이된 키보드가 BottomSheet를 가리는 문제가 발생할 수 있습니다. 이를 해결하기 위해 아래의 단계를 따라 할 수 있습니다.

Keyboard Aware BottomSheet 패키지 설치 먼저, keyboard_aware_bottom_sheet 패키지를 설치합니다. 이 패키지는 BottomSheet가 키보드와 충돌하지 않도록 하는 기능을 제공합니다. 아래는 pubspec.yaml 파일에 추가해야 하는 내용입니다.
```
dependencies:
  flutter:
    sdk: flutter
  keyboard_aware_bottom_sheet: ^1.0.0
```
KeyboardAwareBottomSheet 사용 다음으로, KeyboardAwareBottomSheet 위젯을 사용하여 BottomSheet를 생성합니다. 이 패키지는 키보드가 활성화될 때 BottomSheet를 위로 올려주어 키보드가 BottomSheet를 가리지 않도록 합니다.

아래는 KeyboardAwareBottomSheet 사용 예시입니다.
```
import 'package:keyboard_aware_bottom_sheet/keyboard_aware_bottom_sheet.dart';

// ...

void _showBottomSheet(BuildContext context) {
  KeyboardAwareBottomSheet(
    // ...
    builder: (context) => Container(
      // BottomSheet 내용
    ),
  ).show(context);
}
```
테스트 앱을 실행하여 BottomSheet를 열고, 입력 필드를 탭하여 키보드가 올라오는지 확인합니다. 키보드가 올라올 때 BottomSheet가 가려지지 않으면 문제가 해결된 것입니다.

이와 같이 keyboard_aware_bottom_sheet 패키지를 사용하여 Flutter 애플리케이션에서 BottomSheet와 키보드를 함께 사용할 수 있습니다.

여기까지가 Flutter의 BottomSheet에 키보드를 함께 사용하는 방법입니다. 부가적인 정보가 필요하다면 추가적인 자료를 참고하시기 바랍니다.