When I pull up the virtual keyboard on my virtual android device, it looks as follows:
As you can see, there is a sizable amount of black padding at the bottom of the keyboard. I can't figure out how to get rid of this.
I have already tried resizeToAvoidBottomPadding: false,
, which removes the padding at the bottom of the screen when the keyboard is not showing, but doesn't help when it is. Would much appreciate any input!
Code:
Scaffold(
backgroundColor:const Color(0xffFFF6E0),
resizeToAvoidBottomPadding: false,
child:GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child:Container(
child: Stack(
overflow: Overflow.clip,
children: <Widget>[
AnimatedPositioned(
duration: Duration(milliseconds: 400),
top:5,
bottom: (mode == 1)?MediaQuery.of(context).size.height*.18:MediaQuery.of(context).size.height,
left:5,
right:5,
child:Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Theme.of(context).colorScheme.primary,
),
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
Text(
"Welcome Back!",
style: Theme.of(context).textTheme.display3.copyWith(fontSize: 44),
),
Container(
margin: EdgeInsets.only(left:20,right:20,top:20),
//padding: EdgeInsets.only(right:20,left:20,),
padding: EdgeInsets.only(right:20,left:20,),
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(20),
color:Theme.of(context).primaryColor,
),
//child:
child:new TextField(
decoration: InputDecoration(
hintText: 'email',
border: InputBorder.none
),
)
),
Container(
margin: EdgeInsets.only(left:20,right:20,top:20),
//padding: EdgeInsets.only(right:20,left:20,),
padding: EdgeInsets.only(right:20,left:20,),
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(20),
color:Theme.of(context).primaryColor,
),
//child:
child:new TextField(
decoration: InputDecoration(
hintText: 'email',
border: InputBorder.none
),
)
),
Container(
margin: EdgeInsets.only(left:20,right:20,top:20),
//padding: EdgeInsets.only(right:20,left:20,),
padding: EdgeInsets.only(right:20,left:20,),
decoration: new BoxDecoration(
borderRadius: BorderRadius.circular(20),
color:Theme.of(context).primaryColor,
),
//child:
child:new TextField(
decoration: InputDecoration(
hintText: 'email',
border: InputBorder.none
),
)
)
],
),
)
),
Positioned(
bottom:0,
left:0,
right:0,
child:
Align(
alignment: Alignment.bottomCenter,
child: RaisedButton(
color: const Color(0xff251605),
elevation: 4,
textColor: const Color(0xffFFF6E0),
//padding: EdgeInsets.fromLTRB(15, 15, 15, 15),
child:
SizedBox(
width: 200,
height: 35,
child:
Text("Back",style:TextStyle(color:const Color(0xffFFF6E0),fontSize: 24,fontWeight:FontWeight.normal),textAlign: TextAlign.center,),
),
onPressed: (){
},
padding: const EdgeInsets.all(15.0),
shape: RoundedRectangleBorder(borderRadius: new BorderRadius.circular(40.0))
),
)
)
]
)
)
)
In your build method just before returning add this
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);