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).
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.
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.
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: () {},
),
),
);
}
}