CODEWITHSUNDEEP
flutterdartflutter-bottomnavigation
Azeem Muzammil
Azeem Muzammil

Reputation: 384

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

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?

Upvotes: 12

Views: 19446

Answers (4)

hasan karaman
hasan karaman

Reputation: 1430

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.

Upvotes: 4

Shei
Shei

Reputation: 483

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

Upvotes: 9

Shishir Rijal
Shishir Rijal

Reputation: 183

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

Upvotes: 7

Niteesh
Niteesh

Reputation: 3130

set the resizeToAvoidBottomInset: false, in the Scaffold widget

Upvotes: 15

Related Questions