When the keyboard appears, the Flutter widgets resize. How to prevent this?
Updated Answer
resizeToAvoidBottomPadding
is now deprecated.
The updated solution is to set resizeToAvoidBottomInset
property to false
.
Original Answer
In your Scaffold
, set resizeToAvoidBottomPadding
property to false
.
My approach is to use SingleChildScrollView
with the ClampingScrollPhysics
physics.
SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Container(),
)
Most other answers suggest using resizeToAvoidBottomPadding=false
. In my experience this allows the keyboard to cover up text fields if they are underneath where the keyboard would appear.
My current solution is to force my column to be the same height as the screen, then place it in a SingleChildScrollView
so that Flutter automatically scrolls my screen up just enough when the keyboard is used.
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
minHeight: MediaQuery.of(context).size.height,
),
child: IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
// CONTENT HERE
],
),
),
),
),
);
}
I use NeverScrollableScrollPhysics
so that the user cannot scroll around themselves.
Set resizeToAvoidBottomInset
to false
instead of resizeToAvoidBottomPadding
which is deprecated.
return Scaffold(
resizeToAvoidBottomInset : false,
body: YourWidgets(),
);