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;
                  });
                },
              ),

Solution 1

You could try to add a Padding widget (https://api.flutter.dev/flutter/widgets/Padding-class.html) around your Icon that uses Font awesome.

Solution 2

My usage of @Ludovic Garon answer

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

Solution 3

Use IconButton instead of Icon like this:

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

Comments

[Apps 247]

Thank you! I just discovered that the bottom navbar icon parameter has the type Widget, so any item including Container, Text, or (like you said) Padding, does the trick.