Flutter: Background image is squeezing when keyboard appears
Or you should use a Scaffold parameter
resizeToAvoidBottomInset: false
Scaffold(
resizeToAvoidBottomInset: false,
body: (your_code)
)
Looks like you just need to move the background image to become the parent widget. i.e
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage('assets/images/bg.png'),
fit: BoxFit.fill,
alignment:Alignment.topCenter,
),
),
child: Stack(
children: <Widget>[
Container(
child: SingleChildScrollView(
padding: EdgeInsets.all(width * 0.10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: height * 0.10,
),
Container(
decoration: BoxDecoration(color: Colors.transparent),
child: Container(
margin: EdgeInsets.only(
bottom: height * 0.02, left: 20.0, right: 20.0),
child: Image.asset('assets/images/logo.png'),
),
),
SizedBox(
height: height * 0.05,
),
Container(
decoration:
BoxDecoration(color: Colors.transparent),
child: Container()
new Form(
key: _formKey,
autovalidate: _autoValidate,
child: LoginFrom(width, height))
),
],
),
),
),
],
)) // This trailing comma makes auto-formatting nicer for build methods.
);
If Layout of you contain TextField inside ScrollView then resizeToAvoidBottomInset: false
makes you unable to scroll
.
You can do this to fix it:
Wrap the Scaffold
with Container
. After make the background color of Scaffold
to transparent.
@override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/bg.png'),
fit: BoxFit.cover,
)),
child: Scaffold(
backgroundColor: Colors.transparent,
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
-----------SingleChildScrollView with TextField-------------
Add resizeToAvoidBottomInset: false
property to Scaffold.
to Scaffold
Scaffold(
resizeToAvoidBottomInset: false,
body: BodyWidget
)