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

Question

我正在尝试在 flutter 中制作一个底部导航栏。 我使用以下代码制作了底部导航栏。

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:
      ),

它看起来像这样：

我想要我的第一个底部导航条，即“。” 和“探索”在同一行。 我尝试使用 Container 和其他小部件，但没有奏效。

Answer 1

您应该创建一个自定义 Bottmnavigation Bar 。 例如：

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')
                                         ]
                                    ),
                                  ]
                                ) 
                             ),
                           ) 
                }