如何摆脱自定义底部导航栏颤动周围的空白？

Posted 2023-03-25

【中文标题】如何摆脱自定义底部导航栏颤动周围的空白？

【英文标题】：how to get rid of white space around the custom bottom navBar flutter?

【发布时间】：2022-01-21 21:53:57

【问题描述】：

我创建了一个自定义底部中殿栏，但它周围仍有一个空白区域。如何摆脱它？另外，如果我在容器中放置一个按钮以赋予它一个高度或宽度，也会发现同样的问题。

图像是：

代码是：

bottomNavigationBar: ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(40)),
        // clipper: ,
        child: Container(
          clipBehavior: Clip.hardEdge,
          margin: EdgeInsets.all(5.w),
          decoration: BoxDecoration(
            color: whiteColor,
            borderRadius: const BorderRadius.all(Radius.circular(10)),
            boxShadow: [
              BoxShadow(
                color: shadowColor.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 7,
                offset: const Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
          child: BottomNavigationBar(
            currentIndex: pageIndex,
            onTap: (int value) 
              pageIndex = value;
              setState(() );
            ,
            type: BottomNavigationBarType.fixed,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'home'.tr,
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.flag_sharp),
                label: "add_opportunity".tr,
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: 'profile'.tr,
              ),
            ],
          ),
        ),
      ),

【问题讨论】：

你能试试去掉边距吗！

没有任何变化，如果我这样做了@KrishBhanushali

尝试脚手架：extendBody：真

把它作为接受它的答案，@Jim

给你，发布一个答案，很高兴听到它有帮助

【参考方案1】：

试试extendBody：

return Scaffold(
  extendBody: true,
  bottomNavigationBar: ClipRRect(
    borderRadius: const BorderRadius.all(Radius.circular(40)),