플러터에서 showModalBottomSheet를 키보드가 올라오면서 가리는 경우 해결방법

아래와 같이 코딩을 했을 경우 입력을 위해 키보드를 사용하려고 하면 키보드가 위에서 올라오면서 showModalBottomSheet()를 가리게 됩니다.

키보드가 올라오기전

키보드가 올라온후

IconButton(
            onPressed: () {
              showModalBottomSheet(
                context: context,
                builder: (context) {
                  return SizedBox(
                    height: 250,
                    child: AddTask(),
                  );
                },
              );
            },
            icon: const Icon(
              Icons.add,
            ),

import 'package:flutter/material.dart';

class AddTask extends StatefulWidget {
  const AddTask({super.key});

  @override
  State<AddTask> createState() => _AddTaskState();
}

class _AddTaskState extends State<AddTask> {
  var todoText = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text("Add task"),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 10),
          child: TextField(
            controller: todoText,
            decoration: InputDecoration(hintText: "Add task"),
          ),
        ),
        ElevatedButton(
          onPressed: () {
            print(todoText.text);
            todoText.clear();
          },
          child: const Text("Add"),
        ),
      ],
    );
  }
}

 

SizedBox()를 Padding()으로 감싸고 padding속성에서 padding 값을

MediaQuery.of(context).viewInsets 로 넣으면 해결이 됩니다.

 

 

• MediaQuery.of(context): 현재 화면과 관련된 정보를 담고 있는 MediaQuery 객체를 가져옵니다. 여기에는 화면 방향, 픽셀 밀도, 시스템 UI 요소 등의 정보가 포함됩니다.
• viewInsets: MediaQueryData 객체의 속성으로, 시스템 UI 요소 (예: 키보드) 에 의해 앱 콘텐츠 영역이 침범되는 양을 나타냅니다. EdgeInsets 객체이며, top, right, bottom, left 여백 정보를 가지고 있습니다.

 

 

 

나비일기장 [수발일기장] - Google Play 앱

 

Tester Share [테스터쉐어] - Google Play 앱