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

user_9103832 0
Viewed 5430

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(() {});
  }
}

Undesired behavior

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?

flutter-bottomnavigation dart flutter
3 Answers

set the resizeToAvoidBottomInset: false, in the Scaffold widget

user_132416510

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

user_148535990

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

user_112570810
Related