How to remove padding of BottomNavigationBarItem's "icon" property in Flutter? - flutter

Question

There is always an unknown white space between my BottomNavigationBar and the bottom of screen. The image on the left is desired layout, but I'm only able to produce the image on the right.
Here's my code:
import 'package:flutter/material.dart';
class Wrapper extends StatefulWidget {
const Wrapper({Key? key}) : super(key: key);
#override
State<Wrapper> createState() => _WrapperState();
}
class _WrapperState extends State<Wrapper> {
final _selectedItemColor = Colors.white;
final _unselectedItemColor = const Color(0xffa3a3a3);
final _selectedBgColor = const Color(0xff1a8468);
final _unselectedBgColor = const Color(0xfff2f2f2);
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: History',
style: optionStyle,
),
Text(
'Index 2: Lucky',
style: optionStyle,
),
Text(
'Index 3: Analysis',
style: optionStyle,
),
Text(
'Index 4: Settings',
style: optionStyle,
),
];
void _onItemTapped(int index) {
print('asdasdasd');
setState(() {
_selectedIndex = index;
});
}
Color _getBgColor(int index) =>
_selectedIndex == index ? _selectedBgColor : _unselectedBgColor;
Color _getItemColor(int index) =>
_selectedIndex == index ? _selectedItemColor : _unselectedItemColor;
Widget _buildIcon(IconData iconData, String text, int index) => Container(
width: double.infinity,
height: kToolbarHeight,
color: _getBgColor(index),
child: InkWell(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(iconData),
Text(text,
style: TextStyle(fontSize: 12, color: _getItemColor(index))),
],
),
onTap: () => _onItemTapped(index),
),
);
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
elevation: 0,
centerTitle: false,
title: const Text('Title'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
selectedFontSize: 0,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: _buildIcon(Icons.home, 'Home', 0),
label: '',
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.history, 'History', 1),
label: '',
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.api_outlined, 'Lucky', 2),
label: '',
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.analytics, 'Analysis', 3),
label: '',
),
BottomNavigationBarItem(
icon: _buildIcon(Icons.settings, 'Settings', 4),
label: '',
),
],
currentIndex: _selectedIndex,
selectedItemColor: _selectedItemColor,
unselectedItemColor: _unselectedItemColor,
type: BottomNavigationBarType.fixed,
backgroundColor: const Color(0xfff2f2f2),
),
);
}
}
p/s: I've replaced some IconData, the outcome won't be exactly same.
May I know how do I remove the bottom blank space at the bottom? Any help is appreciated.

Answer 1

try this!
1 - Add this below _getItemColor
Color _getIconColor(int index) => _selectedIndex == index ? _selectedItemColor : _unselectedItemColor;
2 - Replace _buildIcon Widget
Widget _buildIcon(IconData iconData, String text, int index) => Container(
width: MediaQuery.of(context).size.width/5,
color: _getBgColor(index),
padding: EdgeInsets.only(bottom: 20,top: 10),
child: InkWell(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(iconData,color: _getIconColor(index)),
Text(text, style: TextStyle(fontSize: 12, color: _getItemColor(index))),
],
),
onTap: () => _onItemTapped(index),
),
);
3 - Wrap your Scaffold into to SafeArea
return SafeArea(
top: false,
bottom: false,
maintainBottomViewPadding: true,
minimum: EdgeInsets.only(bottom: 2.0),
child: Scaffold(code));
4 - Replace bottomNavigationBar
bottomNavigationBar: Container(
child: Wrap(
direction: Axis.horizontal,
crossAxisAlignment: WrapCrossAlignment.center,
alignment: WrapAlignment.spaceBetween,
children: [
_buildIcon(Icons.home, 'Home', 0),
_buildIcon(Icons.history, 'History', 1),
_buildIcon(Icons.api_outlined, 'Lucky', 2),
_buildIcon(Icons.analytics, 'Analysis', 3),
_buildIcon(Icons.settings, 'Settings', 4),
],
),
),
Full source code here