How to disable the behavior Bottom Navigation Bar goes up with keyboard in flutter

Question

In my app, I have a search page and when I click on the search text field bottom navigation bar also moves up with the keyboard where it supposed to be hidden under the keyboard. Because while the keyboard is showing I can navigate to other pages which is undesirable behavior.

The Code:

class _AppHomeViewState extends State<AppHomeView>
    with TickerProviderStateMixin {

  TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 4, vsync: this, initialIndex: 0);
    tabController.addListener(handleTabSelection);
  }

  @override
  Widget build(BuildContext context) {
    final scaffold = Scaffold(
      body: SafeArea(child: _buildBody(context)),
      bottomNavigationBar: Container(
        height: 48,
        decoration: BoxDecoration(
          color: StyledColors.BACKGROUND_COLOR,
          boxShadow: [
            BoxShadow(
              color: StyledColors.FORGROUND_COLOR.withOpacity(0.16),
              blurRadius: 12,
              offset: Offset(0, 0),
            ),
          ],
        ),
        child: SafeArea(
          child: _buildTabBar(context),
        ),
      ),
    );
  }

  Widget _buildBody(BuildContext context) {
    return TabBarView(
      physics: NeverScrollableScrollPhysics(),
      controller: tabController,
      children: <Widget>[
        HomeView(),
        SearchView(),
        OrdersView(),
        ProfileView(),
      ],
    );
  }

  Widget _buildTabBar(BuildContext context) {
    return TabBar(
      controller: tabController,
      tabs: <Widget>[
        Tab(
          icon: Icon(
            Icons.store,
            size: 28,
          ),
        ),
        Tab(
          icon: Icon(
            Icons.search,
            size: 28,
          ),
        ),
        Tab(
          icon: Icon(
            Icons.receipt,
            size: 28,
          ),
        ),
        Tab(
          icon: Icon(
            Icons.person,
            size: 28,
          ),
        )
      ],
      indicatorColor: Colors.transparent,
      unselectedLabelColor: StyledColors.MEDIUM_GREY,
      labelColor: StyledColors.PRIMARY_COLOR,
    );
  }

  void handleTabSelection() {
    setState(() {});
  }
}

What is supposed to behave is when I click on the search, the bottom navigation bar should stay behind the keyboard and not come up with the keyboard?

Niteesh · Accepted Answer · 2020-07-18T19:12:21.857

9

set the resizeToAvoidBottomInset: false, in the Scaffold widget

edited Jul 18 '20 at 19:12

answered Jul 18 '20 at 18:43

Niteesh

2,742
3
12
33

11

Not working with the latest version of flutter => 2.5.0 – Musthafa Sep 30 '21 at 14:04
2

Yes me too. not working for after upgrade flutter 2.5.1 – ÄR Âmmãř Żąîñh Oct 02 '21 at 22:34
2

This doesn't work – Snivio Dec 22 '21 at 06:52
anything else to solve that? – Thierry P. Oliveira Apr 13 '22 at 13:15

score 5 · Answer 2 · answered Sep 06 '22 at 19:12

5

If you have nested Scaffold, check that your root Scaffold also has resizeToAvoidBottomInset: false set.

answered Sep 06 '22 at 19:12

Shei

393
4
15

score 3 · Answer 3 · answered Jul 08 '22 at 16:51

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.. Here is how it looks.. First create a boolean variable which checks if the keyboard is open or not..

bool isKeyboardOpen = MediaQuery.of(context).viewInsets.bottom != 0.0;

Now do something like this to toggle your bottomNavbar

  bottomNavigationBar: isKeyboardOpen
      ? null
      : BottomAppBar();

This technique also works with the floating action bottom issue..

score 1 · Answer 4 · answered Apr 23 '23 at 00:44

1

Edit

   resizeToAvoidBottomInset: false

in the scaffold widget.

If this doesn't work,

you probably have more than one piece of scaffolding. so just edit the top one to

resizeToAvoidBottomInset: false.

answered Apr 23 '23 at 00:44

hasan karaman

1,260
6
12

How to disable the behavior Bottom Navigation Bar goes up with keyboard in flutter

4 Answers4