Search code examples
flutterdartflutter-layout

Flutter - how remove padding from BottomNavigationBar?


I use BottomNavigationBar in my flutter app. I have additional requirements for appearance, this is the result that I got. everything is fine except for the top and bottom padding (arrows in the figure).

enter image description here

This is my code:

BottomNavigationBar(
    selectedFontSize: 0,
    type: BottomNavigationBarType.fixed,
    currentIndex: currIndex,
    items: tabs.map((e) {
      return BottomNavigationBarItem(
          title: SizedBox.shrink(),
          icon: _buildIcon(e),
      );
    }).toList(),
  )
  
  
Widget _buildIcon(Data data) {

return Container(
  width: double.infinity,
  height:kBottomNavigationBarHeight ,
  child: Material(
    color:  _getBackgroundColor(data.index),
    child: InkWell(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(Icons.email_outlined),
         
          Text('111', style: TextStyle(fontSize: 12, color: Colors.white)),
        ],
      ),
      onTap: () {
        onTabSelected(data.index);
      },
    ),
  ),
);
}    

how can i remove those top and bottom padding? any ideas i will greatly appreciate.


Solution

  • I made a sample code using your part code.

    But I can not reproduce like your problem with shared your code.
    Could you share a part of Scaffold's bottomNavigationBar or other related to code. enter image description here

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      int _counter = 0;
    
      void _incrementCounter() {
        setState(() {
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'You have pushed the button this many times:',
                  ),
                  Text(
                    '$_counter',
                    style: Theme.of(context).textTheme.display1,
                  ),
                ],
              ),
            ),
            bottomNavigationBar: BottomNavigationBar(
                selectedFontSize: 0,
                type: BottomNavigationBarType.fixed,
                currentIndex: 0,
                items: [
                  new BottomNavigationBarItem(
                    icon: _buildIcon(),
                    title: SizedBox.shrink(),
                  ),
                  new BottomNavigationBarItem(
                    icon: _buildIcon(),
                    title: SizedBox.shrink(),
                  ),
                  new BottomNavigationBarItem(
                    icon: _buildIcon(),
                    title: SizedBox.shrink(),
                  )
                ]));
      }
    
      Widget _buildIcon() {
        return Container(
          width: double.infinity,
          height: kBottomNavigationBarHeight,
          child: Material(
            color: Colors.grey,
            child: InkWell(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.email_outlined),
                  Text('111', style: TextStyle(fontSize: 12, color: Colors.white)),
                ],
              ),
              onTap: () {},
            ),
          ),
        );
      }
    }