Block the input box when the flutter keyboard bounces up

The problem

A common situation with the flutter project is that the TextField TextField is located near the bottom of the page. When the input field is clicked to bring up the keyboard, the TextField will be obscured by the keyboard, affecting the user experience

The solution

• Padding outside TextFiled
• Mediaquery.of (context).viewinsets. Bottom is the keyboard height obtained when the keyboard is up

Padding(
  padding: EdgeInsets.only(
    bottom: MediaQuery.of(context).viewInsets.bottom
  ),
  child: TextField(
    controller: _controller,
  )
)
Copy the code

• Add SingleChildScrollView and its reverse: True property to the main widget
• The code between the body and SingleChildScrollView says: when the keyboard pops up, click on a blank part of the page and the keyboard collapses

body: GestureDetector(
    behavior: HitTestBehavior.translucent,
    onTap: () {
      FocusScope.of(context).requestFocus(FocusNode());
    },
    child: SingleChildScrollView(
      reverse: true,
      child: ......
    )
)
Copy the code

• In the Scaffold to add attributes resizeToAvoidBottomInset: false

return Scaffold(
    resizeToAvoidBottomInset: false,...).Copy the code