我可以在 Flutter 底部导航栏中的图标周围添加间距吗？

Question

我在 Flutter 中有一个底部导航栏，并计划为项目使用 Font Awesome 图标。但是，与 material 图标相比，超赞字体图标周围没有任何间距。这使他们触摸底部导航栏项目标题。有什么办法可以在它们之间添加 space 吗？

底部导航条码：

BottomNavigationBar(
                type: BottomNavigationBarType.shifting,
                currentIndex: _currentIndex,
                items: [
                  BottomNavigationBarItem(
                    icon: Icon(
                      Icons.list,
                      size: 30.0,
                    ),
                    title: Text('Notice Board'),
                    backgroundColor: Colors.grey[900],
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(
                      FontAwesomeIcons.handsHelping,

                      // size: 30.0,
                    ),
                    title: Text('Services'),
                    backgroundColor: Colors.green,
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(
                      Icons.add,
                      size: 35.0,

                    ),
                    title: Text('Create'),
                    backgroundColor: Colors.cyan,
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(
                      FontAwesomeIcons.store,
                      // size: 30.0,
                    ),
                    title: Text('Marketplace'),
                    backgroundColor: Colors.orange,
                  ),
                ],
                onTap: (index) {
                  setState(() {
                    _currentIndex = index;
                  });
                },
              ),

Answer 1

使用IconButton代替Icon 像这样：

 IconButton(
          icon: IconButton(
            icon: Icon(Icons.add_circle),
            onPressed: (){},
          ),

Answer 2

您可以尝试在使用 Font awesome 的图标周围添加一个填充小部件 (https://api.flutter.dev/flutter/widgets/Padding-class.html)。

Answer 3

我对@Ludovic Garon 回答的用法

icon: Padding( padding: EdgeInsets.all(16.0), child: Icon(Icons.search), ),

Answer 4

另一种方法，如果您的图标设计为固定标签，请在 textStyle

中指定高度属性

...selectedLabelStyle: TextStyle(height: 1.5,fontSize: 12),
        unselectedLabelStyle: TextStyle(fontSize:12, height: 1.5),

我可以在 Flutter 底部导航栏中的图标周围添加间距吗？

Can I add spacing around an icon in Flutter Bottom Navigation Bar?

font-awesome

flutter