androiduser-interfaceflutterdarthidden-field

My textfield hides behind keyboard in BottomNavigationBar when I click to edit it


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


Solution

  • 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.