Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bottom Navigation Bar Sticks to Top of Keyboard

It seems that a recent update of Flutter changed the behavior of the BottomNavigationBar. Formerly, when the keyboard appeared, the keyboard would cover the BottomNavigationBar. Now, however, the BottomNavigationBar sticks to the top of the keyboard when it appears and is always visible.

How do I set the BottomNavigationBar to remain underneath the keyboard when the keyboard appears?

  bottomNavigationBar: new BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      fixedColor: Colors.blue,
      onTap: _navigationTapped,
      currentIndex: _pageIndex,
      items: [
        new BottomNavigationBarItem(icon: new Icon(Icons.apps), title: new Text("Manage")),
        new BottomNavigationBarItem(icon: new Icon(Icons.multiline_chart), title: new Text("A")),
        new BottomNavigationBarItem(icon: new Icon(Icons.check_box), title: new Text("B")),
        new BottomNavigationBarItem(icon: new Icon(Icons.person_add), title: new Text("C")),
        new BottomNavigationBarItem(icon: new Icon(Icons.border_color), title: new Text("D")),
      ]
  ),
like image 837
jared-nelsen Avatar asked Sep 16 '18 02:09

jared-nelsen


People also ask

How do you keep a bottom nav bar from being pushed up on keyboard?

Try removing this: android:windowSoftInputMode="adjustResize" from AndroidManifest. xml This should help. You have 3 options for what to do when the keyboard shows- scroll the app such that the cursor is onscreen, resize the app in the remaining space, or nothing. Number 2 is probably the closest to what you want.

How do you turn off the behavior bottom navigation bar goes up with keyboard in flutter?

I just came across the same problem where my bottomNavbar is moving up with the keyboard when the keyboard is enabled. I solved it by checking if the keyboard is open or not. If it is open, just hide the disable the bottomNavbar and when it is closed, it's time to enable the navbar..

How do I change the bottom navigation bar?

To create a Menu Resource File , click on the app -> res -> menu(right-click) -> New -> Menu Resource File and name it bottom_nav_menu. Now the user can create as many items as he wants in the bottom_nav_menu. xml file. The user also needs to create an icon for each of these items.


3 Answers

Please make sure the widget tree including the parent only contain one scaffold.

Scaffold(
      body: const TextField(),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.blue,
        onTap: (int value) {
          return value;
        },
        currentIndex: 0,
        items: [
          BottomNavigationBarItem(icon: new Icon(Icons.apps), title: new Text("Manage")),
          BottomNavigationBarItem(icon: new Icon(Icons.multiline_chart), title: new Text("A")),
          BottomNavigationBarItem(icon: new Icon(Icons.check_box), title: new Text("B")),
          BottomNavigationBarItem(icon: new Icon(Icons.person_add), title: new Text("C")),
          BottomNavigationBarItem(icon: new Icon(Icons.border_color), title: new Text("D")),
        ],
      ),
    );

This will cause bottom navigation being pushed above keyboard.

 return Scaffold(
      body: Scaffold(
        ....
like image 144
Terry Avatar answered Oct 25 '22 16:10

Terry


if your flutter version is before 1.1.9

use

return Scaffold(
         resizeToAvoidBottomPadding: false,
         ...

else

return Scaffold(
         resizeToAvoidBottomInset: false,
         ...
like image 2
Sam Chan Avatar answered Oct 25 '22 14:10

Sam Chan


Do you have resizeToAvoidBottomInset: false in your Scaffold? That causes the bottomBar to go up when the keyboard appears

like image 1
alexandreohara Avatar answered Oct 25 '22 14:10

alexandreohara