i want when the user wants to input something, the keyboard should push the screen up instead of creating an error, i don't want the keyboard to cover on top of the screen by setting "resizeToAvoidBottomPadding" to true is what most people suggested but it covered on top of everything instead of pushing the screen up, here is my code,
here is my code below
Container(),
content == 'livechat'
? Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
width: MediaQuery.of(context).size.width *
2.5 /
100),
Bounce(
duration: Duration(milliseconds: 110),
onPressed: () {
Navigator.of(context).pop();
},
child: Container(
child: Text("Minimize",
style: TextStyle(
color: Color(0xffffffff),
fontFamily: 'Montserrat',
fontSize: MediaQuery.of(context)
.size
.height *
2 /
100,
fontWeight: FontWeight.w400)))),
Spacer(),
Bounce(
duration: Duration(milliseconds: 110),
onPressed: () {
Navigator.of(context).pop();
},
child: Container(
child: Text("Close",
style: TextStyle(
color: Color(0xffffffff),
fontFamily: 'Montserrat',
fontSize: MediaQuery.of(context)
.size
.height *
2 /
100,
fontWeight: FontWeight.w400)))),
SizedBox(
width: MediaQuery.of(context).size.width *
2.5 /
100)
])),
SizedBox(
height:
MediaQuery.of(context).size.height * 5 / 100),
Container(
height:
MediaQuery.of(context).size.height * 6 / 100,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
// <--- left side
color: Color(0xff333333),
width: 1.0,
),
top: BorderSide(
// <--- left side
color: Color(0xff333333),
width: 1.0,
),
)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
width:
MediaQuery.of(context).size.width *
2.5 /
100),
Container(
child: Text("Connnected to Chat",
style: TextStyle(
color: Color(0xffffffff),
fontFamily: 'Montserrat',
fontSize: MediaQuery.of(context)
.size
.height *
1.7 /
100,
fontWeight: FontWeight.w400))),
])),
SizedBox(
height:
MediaQuery.of(context).size.height * 1 / 100),
Container(
height: MediaQuery.of(context).size.height *
30/
100,
child:ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
Container(
height: MediaQuery.of(context)
.size
.height *
6 /
100,
width: MediaQuery.of(context)
.size
.width,
decoration: BoxDecoration(),
child: Row(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
width: MediaQuery.of(
context)
.size
.width *
2.5 /
100),
Container(
width:
MediaQuery.of(context)
.size
.width *
90 /
100,
child: Text(
"Support : Hi there, how can we help?",
style: TextStyle(
color: Color(
0xffffffff),
fontFamily:
'Montserrat',
fontSize: MediaQuery.of(
context)
.size
.height *
1.7 /
100,
fontWeight:
FontWeight
.w400))),
]))
])),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Color(0xff131313),
),
height: MediaQuery.of(context).size.height *
6 /
100,
child: TextField(
keyboardType: TextInputType.multiline,
maxLines: 15,
style: TextStyle(
fontSize: MediaQuery.of(context)
.size
.height *
1.5 /
100,
color: Color(0xffa6a6a6)),
decoration: InputDecoration(
contentPadding: EdgeInsets.all(
MediaQuery.of(context)
.size
.height *
2.1 /
100),
border: InputBorder.none,
hintText: 'Type your Message here',
hintStyle: TextStyle(
fontSize: MediaQuery.of(context)
.size
.height *
1.9 /
100,
color: Color(0xffa6a6a6))),
)),
SizedBox(
height: MediaQuery.of(context).size.height *
2 /
100),
Container(
height: MediaQuery.of(context).size.height *
6 /
100,
width: MediaQuery.of(context).size.width *
95 /
100,
child: ElevatedButton(
onPressed: () {
// Respond to button press
},
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.center,
children: <Widget>[
Text("Send",
style: TextStyle(
color: Color(0xffffffff),
fontFamily: 'Montserrat',
fontSize:
MediaQuery.of(context)
.size
.height *
1.4 /
100,
fontWeight:
FontWeight.w600))
]),
))
])
]))
Simply wrap the entire root container into SingleChildScrollView so that it would scroll automatically when the keyboard pops up. For reference refer to https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html.
User contributions licensed under CC BY-SA 3.0