How to disable the behavior Bottom Navigation Bar goes up with keyboard in flutter
3,587
set the resizeToAvoidBottomInset: false,
in the Scaffold widget
Comments
-
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(() {}); } }
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?