Is there a way to customize BottomNavigationBar's height?
I currently have a BottomNavigationBar with tabs to taps/swipe navigate, however the default height (even after reducing the text and icon) is too high.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text( 'RefLog', style: Styles.headerLarge ),
actions: <Widget>[
new IconButton(
icon: Icon(Icons.list),
onPressed: () {},
)
],
),
body: DefaultTabController(
length: 3,
child: Scaffold(
body: TabBarView(
children: _children,
),
bottomNavigationBar: TabBar(
tabs: [
Tab( text: 'One', icon: Icon(Icons.import_contacts, size: 20.0) ),
Tab( text: 'Two', icon: Icon(Icons.restaurant, size: 20.0) ),
Tab( text: 'Three', icon: Icon(Icons.record_voice_over, size: 20.0) ),
],
labelStyle: TextStyle(fontSize: 12.0),
labelColor: Colors.white,
unselectedLabelColor: Colors.white30,
indicatorSize: TabBarIndicatorSize.label,
indicatorColor: Colors.white,
),
backgroundColor: Colors.blue,
),
),
);
}
You can wrapper bottomNavigationBar by SizedBox,
bottomNavigationBar: SizedBox(height: 58, child: //some widget )
I had the same problem, the BottomNavigationBar's height can't be override, my solution was resized the icons using SizedBox, it does decrease the height, other final solution was update the font size of title property, this my example:
new BottomNavigationBarItem(
icon:new SizedBox(
child: new IconButton(
icon: new Image.asset("assets/images/icon_ar.png"),
onPressed: () {}),
width: 38,
height: 38,
),
title: new Text("", style: new TextStyle(fontSize: 0),))
This does my BottomNavigationBar had a size standard in both platforms.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With