Flutter/Dart: Customize Bottom Navigation Bar height
You can create your own widget
Widget customBottomNavigationBar(BuildContext context){
double myHeight =100.0;//Your height HERE
return SizedBox(
height: myHeight,
width: MediaQuery.of(context).size.width,
child: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,
),
);
}
@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: customBottomNavigationBar(context),
backgroundColor: Colors.blue,
),
),
);
}
I set BottomNavigationBar( selectedFontSize: 0.0, unselectedFontSize: 0.0)
. And then I wrap BottomNavigationBar
widget with SizedBox( height: 50)
.
It works for me. Hope it works for u guys too…ð
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.
You can wrapper bottomNavigationBar by SizedBox,
bottomNavigationBar: SizedBox(height: 58, child: //some widget )