Im new to flutter. I am stuck at one place and I can't find the exact solution.
I have a BottomNavigationBar in which I have a textfield that needs input from the user. When I click on the textfield the keyboard covers up the whole half screen and textfield hides behind the keyboard and can't be seen. I want to move the textfield above the keyboard for better UI for the user.
this is the BottomNavigationBar code:
Widget build(BuildContext context) {
return Container(
color: Colors.grey[200],
height: 70,
child: Row(
children: <Widget>[
SizedBox(
height: MediaQuery.of(context).viewInsets.bottom,
),
Container(
width: MediaQuery.of(context).size.width * 0.6,
color: Colors.transparent,
margin: EdgeInsets.fromLTRB(40, 0, 0, 0),
child: TextField( //this is the TextField
style: TextStyle(
fontSize: 30,
fontFamily: 'Karla',
),
decoration: InputDecoration.collapsed(
hintText: 'Experimez-vous...',
hintStyle: TextStyle(color: Colors.black),
),
),
),
],
),
);
This is the main body (Scaffold) Im calling it from:
return Scaffold(
body: Column(
children: <Widget>[
CloseButtonScreen(),
Container(
color: Colors.transparent,
child: HeaderContent(),
),
ContainerListItems(),
],
),
bottomNavigationBar: BottomNavBar(), //this is where Im calling my BottomNavigationBar from
floatingActionButton: FloatingActionBtn(),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
resizeToAvoidBottomPadding: false,
);
screenshots:
the textfield is behind the keyboard in bottomnavigationbar
EXPERIMEZ VOUS the texfield
After a lot of struggling this is how I achieved it. Thanks everyone for contributing.
return Scaffold(
body: GestureDetector(
onTap: () => {
FocusScope.of(context).unfocus(),
},
child: SingleChildScrollView(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
children: <Widget>[
CloseButtonScreen(),
Container(
color: Colors.transparent,
child: HeaderContent(),
),
ContainerListItems(),
Container(
margin: EdgeInsets.only(top: 90),
padding: EdgeInsets.only(left: 20),
color: Colors.transparent,
width: MediaQuery.of(context).size.width,
child: TextFormField(
style: TextStyle(
fontSize: 30,
fontFamily: 'Karla',
),
decoration: InputDecoration.collapsed(
hintText: 'Experimez-vous...',
hintStyle: TextStyle(
color: Color(0xff2e3039),
),
),
),
),
],
),
),
),
),
);
ignore the GestureDetector() widget. Yes you have to wrap the body into SingleChildScrollView(), I was using bottomNavigationBar, had to finish that. Everyone contributed to my question were right. I just had to join the puzzle pieces accordingly.
I had to delete BottomNavigation File and include the code in the main body within a container.