如何使 Flutter BottomNavigationBarItem 图标和 label 在同一行

Question

I am trying to make a bottomnavigation bar in flutter. I have used the following code to make a bottom navigation bar.

child: BottomNavigationBar(
        currentIndex: 0,
        backgroundColor: Colors.red.withOpacity(0),
        type: BottomNavigationBarType.fixed,
        // showSelectedLabels: false,
        showUnselectedLabels: false,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(
              Icons.circle,
              color: Colors.white,
              size: 8,
            ),
            label: 'Explore',
            backgroundColor: Colors.red,
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.shop,
              color: Colors.white,
              size: 17,
            ),
            label: '',
            backgroundColor: Colors.red,
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.favorite,
              color: Colors.white,
              size: 17,
            ),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.person,
              color: Colors.white,
              size: 17,
            ),
            label: '',
          ),
        ],
        selectedItemColor: Colors.white,
        // onTap:
      ),

It looks like this:

I want that my first bottomnavigationbaritem ie '.' and 'explore' to be on same line. I tried using Container and other widget but it didnot worked.

Answer 1

You should create a Custom Bottmnavigation Bar . for example:

Scaffold {
bottomNavigationBar: Container (
                       height: 60,
                       decoration: BoxDecoration(
                                     color: Theme.of(context).primaryColor,
                                     borderRadius: const BorderRadius.only(
                                     topLeft: Radius.circular(20),
                                     topRight: Radius.circular(20),
                      ),
                      child : Row(
                           children: [
                           Row(
                              children : [
                                       Icon(
                                          Icons.circle,
                                          color: Colors.white,
                                          size: 8,
                                           ),
                                           Text('Explore')
                                         ]
                                    ),
                                   Row(
                              children : [
                                       Icon(
                                          Icons.circle,
                                          color: Colors.white,
                                          size: 8,
                                           ),
                                           Text('Explore')
                                         ]
                                    ),
                                   Row(
                              children : [
                                       Icon(
                                          Icons.circle,
                                          color: Colors.white,
                                          size: 8,
                                           ),
                                           Text('Explore')
                                         ]
                                    ),
                                  ]
                                ) 
                             ),
                           ) 
                }