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

3,587

set the resizeToAvoidBottomInset: false, in the Scaffold widget

Share:
3,587
Azeem Muzammil
Author by

Azeem Muzammil

I like to code!

Updated on December 22, 2022

Comments

  • Azeem Muzammil
    Azeem Muzammil over 1 year

    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?