Search code examples
flutterflutter-scaffold

Blank space on top of keyboard when keyboard is visible in Flutter TextField

When the keyboard is visible, there is a blank space above it. I tried suggestions like setting the scaffold property resizeToAvoidBottomInset: false, extendBodyBehindAppBar: true, etc but it did not help.

How can I handle this?

Solution

  • After searching online and trying out things, I found out that the problem came from using padding in the container that held the textfield.

    I used padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 80). This had the effect of adding 16px of space to the left and right of the screen while adding 80px of space to the top and bottom of the screen. So when the keyboard is visible, it pushes up the 80px of space from the bottom and adds it above the keyboard, hence the space above the keyboard.

    Solution

    I replaced padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 80) with padding: const EdgeInsets.fromLTRB(16, 40, 16, 0) so that the bottom of the screen had 0px of space.