首页 > 解决方案 > Flutter BottomNavBar 不显示 BoxShadow

问题描述

我制作了一个自定义的 BottomNav Bar 并将其包裹在一个容器内,这样我就可以给它一些盒子阴影。但盒子阴影不适用。这是代码

class CBottomNavBar extends StatefulWidget {
  @override
  _CBottomNavBarState createState() => _CBottomNavBarState();
}

class _CBottomNavBarState extends State<CBottomNavBar> {
  @override
  Widget build(BuildContext context) {
    return Consumer<SManageIndex>(
      builder: (context, manageIndex, child) => Container(
        height: 80,
        clipBehavior: Clip.hardEdge,
        decoration: BoxDecoration(
            color: primaryColorDark,
            boxShadow: [
              BoxShadow(color: primaryColorDark, blurRadius: 4, spreadRadius: 2)
            ],
            borderRadius: BorderRadius.only(
                topRight: Radius.circular(20), topLeft: Radius.circular(20))),
        child: BottomNavigationBar(
          backgroundColor: primaryColorDark,
          items: [
            BottomNavigationBarItem(
                icon: Icon(
                  FontAwesomeIcons.hospital,
                ),
                title: Text('Appointments')),
            BottomNavigationBarItem(
              icon: Icon(
                FontAwesomeIcons.pills,
              ),
              title: Text('Medicines'),
            ),
            BottomNavigationBarItem(
              icon: Icon(
                FontAwesomeIcons.bookMedical,
              ),
              title: Text('Documents'),
            ),
          ],
          currentIndex: manageIndex.index,
          onTap: (value) => manageIndex.changePage(value),
        ),
      ),
    );
  }
}

在此处输入图像描述

问题是我想要边框半径和盒子阴影,所以我使用了一个容器。也欢迎任何其他直接的方式来做同样的事情。

感谢您的时间。

标签: flutterdart

解决方案


你的答案是Offset。在你的for元素中使用Offset 类,你会很好的decorationboxShadow

//dx is horiztonal and dy is vertical
// play with it
boxShadow: [BoxShadow(offset: Offset(dx, dy));

推荐阅读