I have some widgets inside of a Stack
.
When the keyboard appears, the widgets in the Stack
that were explicitly Positioned at the bottom using Positioned(bottom: 0)
widget, get shifted to the top of keyboard.
How can I prevent this, and make some widgets retain their position, whether or not the keyboard is in the view?
For example, I want the "Offline Mode" label to be under the keyboard, not over it.
Here is a rough sketch of what this page's widgets look like:
Scaffold(
body: Stack(
children: [
LoginImage(),
LoginForm(),
ConnectedToInternet(),
],
),
)
Here is what the ConnectedToInternet
widget looks like-
Positioned(
bottom: 0,
child: Container(
width: MediaQuery.of(context).size.width,
color: Colors.grey[900],
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Center(
child: Text(
"Offline mode",
style: TextStyle(color: Colors.white, fontSize: 12),
),
),
),
),
);
The way I solve this problem by setting resizeToAvoidBottomInset: false,
Scaffold(
appBar: AppBar()
drawer: AppDrawer(),
resizeToAvoidBottomInset: false,
body: Stack(
children:[
// widgets
]
)
)
I faced similar problem while positioning a background image with Positioned(bottom: 0.0) widget in the stack. When the keyboard appeared the image shifted to the top of the keyboard. Solved the problem by doing the following.
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Stack(
children: <Widget>[
_bottomImageStack(),
Scaffold(
appBar: AppBar(),
backgroundColor: Colors.transparent,
body: _mainBody(),
),
],
),
);
}
Widget _bottomImageStack() {
return Positioned(
bottom: 0.0,
child: Container(
height: 235,
width: MediaQuery.of(context).size.width,
child: SvgPicture.asset(
AssetPaths.LOGIN_SCREEN_BG_SVG,
alignment: Alignment.bottomRight,
),
),
);
}
Widget _mainBody() {
return ListView(
children: <Widget>[..Other widgets go here..],
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With