Bottom Navigation Bar Sticks to Top of Keyboard

user_4830432 0
Viewed 10012

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")),
      ]
  ),
flutter-layout flutter
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(
        ....
user_11990410

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

user_124174740

if your flutter version is before 1.1.9

use

return Scaffold(
         resizeToAvoidBottomPadding: false,
         ...

else

return Scaffold(
         resizeToAvoidBottomInset: false,
         ...
user_142330040
Related