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

Question

I have a Bottom Navigation Bar in Flutter, and plan on using Font Awesome Icons for the items. However, when compared to material icons, font awesome icons don't have any spacing around them. This makes them touch the Bottom Navigation Bar Item titles. Is there any way i can add space between these?

Bottom Navigation Bar Code:

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

我对@Ludovic Garon 回答的使用

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

Answer 2

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

Answer 3

Use IconButton instead of Icon like this:

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

Answer 4

Another way to do this, if your Icon is designed to have labels fixed, specify the height property for the in textStyle

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