Question 309730 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – TextField is hidden by keyboard inside of a Modal Bottom Sheet

I have several text fields. When I want to enter text, the keyboard is placed on these text fields. How can I make the keyboard move the Modal Bottom Sheet to the top of the keyboard?

enter image description here

Tags:

2

Answers


  1. 0

    I am also facing the problem.I am facing this issue in latest flutter version and latest flutter_screenutil package.The problem is occured for inheritedMediaQuery which hide the content of the bottomsheet. if you are using flutter_screenutil maybe you are facing this issue.

    so I just add

        ScreenUtilInit(
      useInheritedMediaQuery: true, // add this line and see the magic
      designSize: const Size(414, 896),
      minTextAdapt: true,
      splitScreenMode: true,
    )

    or if you don’t use ScreenUtil then add line in MaterialApp

    useInheritedMediaQuery: true, // add this line and see the magic

    Hope this will solve your problem.

    Login or Signup to reply.
  2. 0

    you use the SingleChildScrollView widget and the ListView or Column widget to create the entire modal scrollable. This can be allowed the content to be scrolled up, as the keyboard appears. And also, the resizeToAvoidBottomInset property can be used the to automatically resize the modal, As the keyboard is displayed.

    example code

        body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              
              TextField(
                decoration: InputDecoration(labelText: 'Field 1'),
              ),
            ],
          ),
        ),
      ),
      resizeToAvoidBottomInset: true, 
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search