How can I make BottomNavigationBar NOT stick on top of keyboard flutter? - flutter

Question

So I wanted to make the sticking of BottomNavigationBar on the keyboard stop.
I have tried:
resizeToAvoidBottomPadding: false; (or true both not working),
The problem with the bottomnavigationbar sticking to my keyboard is when I try to type something, the suggestions are not clearly visible and also it has a nested app bar on another page, which in-turn make it very difficulty to type and see the suggestions.
Here is my code:
#override
void initState() {
super.initState();
getUser();
//PostController().getUser(widget.auth.getCurrentUser());
pages = [Home(), Search(), NewPostPage(), Notifications(), Profile()];
}
#override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: true,
body: Home(context),
);
}
Widget Home(context) {
var bottomOptions = <BottomNavigationBarItem>[];
for (var i = 0; i < widget.bottomItems.length; i++) {
var d = widget.bottomItems[i];
bottomOptions.add(
new BottomNavigationBarItem(
icon: d.icon,
title: Padding(
padding: const EdgeInsets.fromLTRB(3, 3, 3, 0),
child: new Text(d.title, style: TextStyle(fontSize: 12.0)),
),
),
);
}
return Scaffold(
appBar: AppBar(
title: Text(title),
leading: Container(
alignment: Alignment.centerLeft,
child: IconButton(
icon: Icon(Icons.motorcycle),
onPressed: () {
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, anim1, anim2) => Finder(),
transitionsBuilder: (context, anim1, anim2, child) =>
FadeTransition(opacity: anim1, child: child),
transitionDuration: Duration(seconds: 0),
));
}),
),
body: isLoading
? CollectionScaleTransition(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(2.0),
child: Icon(Icons.add_circle, size: 10, color: Colors.blue),
),
Padding(
padding: const EdgeInsets.all(2.0),
child: Icon(Icons.add_circle, size: 10, color: Colors.blue),
),
Padding(
padding: const EdgeInsets.all(2.0),
child: Icon(Icons.add_circle, size: 10, color: Colors.blue),
),
],
)
: PageView(
controller: pageController,
children: pages,
onPageChanged: onPageChanged,
physics: NeverScrollableScrollPhysics(),
),
bottomNavigationBar: BottomNavigationBar(
showUnselectedLabels: true,
items: bottomOptions,
currentIndex: currentIndex,
selectedFontSize: 9,
unselectedFontSize: 9,
type: BottomNavigationBarType.fixed,
onTap: (index) {
setState(() {
onTap(index);
currentIndex = index;
});
},
),
);
}
}
How to make it stop appearing when I try to type on my text-field?
Thank you in Advance!

Answer 1

resizeToAvoidBottomPadding property is deprecated. We need to use resizeToAvoidBottomInset instead. More details here.
Also, I tried to recreate your case but was unable to replicate the issue you mentioned. I took some of your code and used it my sample, as below:
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: Text('test'),
leading: Container(
alignment: Alignment.centerLeft,
child: IconButton(
icon: Icon(Icons.motorcycle),
onPressed: () {}),
)),
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0, // this will be set when a new tab is tapped
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('Home'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.mail),
title: new Text('Messages'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('Profile')
)
],
),
body: Center(
child: TextField(
keyboardType: TextInputType.text,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter a search term'
),
))
);
With above code, when I tap on textfield, the bottom nav didn't show and I was able to type in properly.
Hope this helps.