当键盘在 Flutter 文本字段中可见时，键盘顶部有很多空白区域

Question

This is my code:

build(BuildContext context) {
  return new Scaffold(
    body: new SafeArea(
    child: new ListView.builder(
        itemBuilder: (itemBuilder),
      itemCount: (1),
      padding: kMaterialListPadding,
    ),
  )
 );
}
itemBuilder(BuildContext context, int index) {
    return new TextFormField(
        decoration: new InputDecoration(
          border: const OutlineInputBorder(),
          hintText: "What's on your mind?",
          helperText: "5-500 characters",
        ),
        maxLines: 3,
    );
}

When I tap on the text field, keyboard opens but lot of blank space appears on top of keyboard as you can see in the picture (border of textfield is cut).

It happens because of the ListView. If I add just the text field to the body, appearance is fine.

Answer 1

The reason for lot of wasted space was because there was a Scaffold inside a Scaffold. Each scaffold adding space for keyboard. Removing one solved the problem.

Answer 2

Scaffold has a property resizeToAvoidBottomPadding. Set this property false

Answer 3

For those who see white space after closing the keyboard, it can be caused by MediaQuery, where in my case I used MediaQuery around the base scaffold to fix the problem of using RangeSlider inside a drawer(using the RangeSlider will show the behavior of closing the drawer not changing the value of the slider ), where I used this:

 MediaQuery(
  data: MediaQueryData.fromWindow(window).copyWith(
      gestureSettings: const DeviceGestureSettings(touchSlop: kTouchSlop)),
  child: Scaffold(...)

But this however causes the white space that we saw after dismissing the keyboard, also it causes that when you open the keyboard on form, the screen won't scroll anymore.

So I add the media query solution only on the Scaffold where I used the drawer...

FYI, for those who uses Getx, I used it with bottom app bar, where we use:

Scaffold(
      body: Obx(
        () => IndexedStack(
          children: controller.menuPages,
          index: controller.navMenuIndex(),
        ),
      ),

and then after the main tabs, you use another Scaffold (I used the MediaQuery on this one )