i have a live chat screen i am working on, the result I am getting is here below in the two images
i have tried many different solutions but no good result including adding "resizeToAvoidBottomInset: true" to my scaffold, i need the user to be able to see the textfield and keyboard at the same time like a normal chat, i believe the UI resizes itself or something, i don't know where i am going wrong here, my full code is below for review
import 'package:flutter/material.dart';
import 'package:flutter_bounce/flutter_bounce.dart';
import 'dart:async';
import './login.dart';
import 'package:page_transition/page_transition.dart';
import './settings2.dart';
class SettingsScreen extends StatefulWidget {
final String content;
SettingsScreen({
this.content,
});
@override
Settings createState() => Settings(content: content);
}
class Settings extends State<SettingsScreen> {
final String content;
Settings({
this.content,
});
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: Color(0xff000000),
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
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),
Stack(
//alignment:new Alignment(x, y)
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height *
67 /
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))
]),
))
])
]))
: Container()
])));
}
}
