如何在 Flutter 中删除 BottomNavigationBarItem 的“图标”属性的填充？

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