在Flutter中的所选BottomNavigationBarItem顶部显示图块

Posted 2021-05-03

我正在尝试在选定的BottomNavigationBarItem上显示一个条，如下所示。这正是我所需要的。

BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              currentIndex: currentIndex,
              fixedColor: Colors.blue[800],
              onTap: (value) {

              },
              items: [
                BottomNavigationBarItem(
                    icon: Icon(
                      FontAwesomeIcons.shopify,
                      size: 21.0,
                    ),
                    title: Text(
                      'Abc',

                    )),
                BottomNavigationBarItem(
                    icon: Icon(
                      Icons.shop,
                      size: 21.0,
                    ),
                    title: Text(
                      'Second Tab',

                    )),
                ),
              ],
            ),

参考图像

答案

BottomNavigationBar中的默认Flutter不支持此行为。为了在Flutter中获得BottomNavigationBar的这种行为。您必须创建自己的小部件。

但是下面的软件包可以帮助您轻松实现这一目标。检查以下链接以获取该软件包：

Styled BottomNavigationBar

我希望这能回答您的问题。