如何在Flutter中拆分底部导航栏项目的边距？

debugcn 发表于 Dev

Mira BeeCalifonia

我正在尝试使我的bottomnavigationbar像我附加的图像一样，但我似乎没有得到。下面是我尝试过的。

bottomNavigationBar: Container(
        margin: EdgeInsets.only(left: 5, right: 5),
        decoration: BoxDecoration(
          color: Colors.amber,
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(200), topRight: Radius.circular(200)),
        ),
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          selectedItemColor: Colors.deepOrange,
          unselectedItemColor: Colors.grey,
          iconSize: 0,
          items: [
            BottomNavigationBarItem(
                label: 'Banking',
                icon: FaIcon(FontAwesomeIcons.accessibleIcon)),
            BottomNavigationBarItem(
                label: 'Social', icon: FaIcon(FontAwesomeIcons.accessibleIcon)),
            BottomNavigationBarItem(
                label: 'GTLocate',
                icon: FaIcon(FontAwesomeIcons.accessibleIcon)),
            BottomNavigationBarItem(
                label: 'iReport',
                icon: FaIcon(FontAwesomeIcons.accessibleIcon)),
            BottomNavigationBarItem(
                label: 'GTTraffic',
                icon: FaIcon(FontAwesomeIcons.accessibleIcon)),
          ],
        ),
      ),

这就是我想在这里输入图片描述

这是我目前在此处输入图像描述的内容

阿弗里迪·凯亚尔（Afridi Kayal）

对于底部导航栏中的第一个项目，您只能对所有项目使用背景色的左边框，以实现结果。我在您提供的设计附近制作了一个自定义的底部导航栏：

检查此：ImageNavBar-Dartpad

根据需要调整高度，图像和颜色。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。