Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter/Dart: Customize Bottom Navigation Bar height

Tags:

flutter

dart

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,
    ),
  ),
 );
}
like image 477
Jesse Avatar asked Dec 13 '18 09:12

Jesse


Video Answer


2 Answers

You can wrapper bottomNavigationBar by SizedBox,

bottomNavigationBar: SizedBox(height: 58, child: //some widget )
like image 90
Alex Lu Avatar answered Sep 27 '22 18:09

Alex Lu


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.

like image 22
Osmar I. Cancino Avatar answered Sep 27 '22 20:09

Osmar I. Cancino