이 전 글(Step 7th)에서 일정을 추가할 수 있는 영역인 ScheduleBottomSheet에 입력 컴포넌트 위젯들을 추가해 보았습니다.
이번 스텝에서는 입력을 위한 가상 키보드가 나타날 때 키보드에 입력 UI가 가려지지 않도록 대응하는 처리에 대해 알아보겠습니다.
현상
사진과 같이 내용을 입력하려고 포커스를 주거나 했을때 키보드가 올라와 UI를 가리게 되는 경우가 있다.
이런 경우의 처리 방법에 대하여 알아보자.
해결방법
MediaQuery를 이용하여 키보드가 올라와도 UI가 가려지지 않도록 처리한다.
이 전 글까지 작성되어 있는 코드 파일들 중 “component/schedule_bottom_sheet.dart”, “screen/home_screen.dart” 두 개 파일을 수정해 주어야 한다.
lib/component/schedule_bottom_sheet.dart
...생략...
class _ScheduleBottomSheetState extends State<ScheduleBottomSheet> {
@override
Widget build(BuildContext context) {
// 키보드 높이만큼 패딩 주기 위해서 사용
final bottomInset = MediaQuery.of(context).viewInsets.bottom;
return SafeArea(
child: Container(
// 키보드 높이 + 화면 높이의 절반
height: MediaQuery.of(context).size.height * 0.5 + bottomInset,
color: Colors.white,
child: Padding(
// 키보드 높이만큼 패딩 추가
padding: EdgeInsets.only(left: 8, right: 8, top: 8, bottom: bottomInset),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...생략...
MediaQuery의 ‘viewInsets’을 가져오면 시스템이 차지하는 화면 아랫부분 크기를 알 수 있습니다. 일반적으로 이 값은 키보드가 보일 때 차지하는 크기가 됩니다. Container의 높이가 늘어난 만큼 아래에 패딩을 추가해줘서 위젯들이 잘 보이는 위치로 끌어올려줍니다.
lib/screen/home_screen.dart
...생략...
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Home')),
floatingActionButton: FloatingActionButton(
backgroundColor: primaryColor,
onPressed: () {
showModalBottomSheet(
context: context,
isDismissible: true, // 배경 클릭 시 닫기
builder: (context) => const ScheduleBottomSheet(),
isScrollControlled: true, // 키보드에 의해 가려지지 않도록 설정
);
},
...생략...
그리고 HomeScreen 위젯에서 showModalBottomSheet() 함수를 약간 변경해줍니다. showModalBottomSheet() 함수는 기본적으로 최대높이를 화면의 반으로 규정합니다. 하지만 isScrollControlled 매개변수에 true를 넣어주면서 간단하게 최대 높이를 화면 전체로 변경할 수 있습니다.
#Flutter #키보드생성시 #해결방법 #안드로이드 #아이폰