如何删除 Flutter 中 BottomNavigationBarItem 的 "icon" 属性的填充？

Question

在我的 BottomNavigationBar 和屏幕底部之间总是有一个未知的白色 space。左边的图是我想要的布局，但我只能制作右边的图。

这是我的代码：


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: 我已经替换了一些IconData，结果不会完全一样。

请问如何去掉底部的空白space？感谢任何帮助。

Answer 1

试试这个！

1 - 在下面添加 _getItemColor

Color _getIconColor(int index) => _selectedIndex == index ? _selectedItemColor : _unselectedItemColor;

2 - 替换 _buildIcon 小部件

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 - 将脚手架包裹到 SafeArea

 return SafeArea(
  top: false,
  bottom: false,
  maintainBottomViewPadding: true,
  minimum: EdgeInsets.only(bottom: 2.0),
  child: Scaffold(code));

4 - 替换 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

如何删除 Flutter 中 BottomNavigationBarItem 的 "icon" 属性的填充？

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

flutter

flutter-layout

如何删除 Flutter 中 BottomNavigationBarItem 的 "icon" 属性 的填充？

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

flutter

flutter-layout

如何删除 Flutter 中 BottomNavigationBarItem 的 "icon" 属性的填充？