user-interface - 如何在 flutter 的标签栏后面添加阴影？

Question

我想在包装在容器中的此选项卡栏后面添加一个微妙的阴影。我试图添加它，但是它没有明显显示出来。
我必须以这种方式进行编辑，因为我必须将条形的边缘裁剪为使其变圆。

Widget _bottomNavigationBar(int selectedIndex) => ClipRRect(
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(52.0), topRight: Radius.circular(52.0)),
    child: Container(
        height: 90,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(82.0),
              topRight: Radius.circular(52.0)),
          boxShadow: <BoxShadow>[
            BoxShadow(
              color: Colors.black,
              offset: Offset(-5, 5),
              blurRadius: 10,
            ),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(52.0),
              topRight: Radius.circular(52.0)),
          child: BottomNavigationBar(
            selectedItemColor: Color(0xFFFE524B),
            unselectedItemColor: Color(0xFFFF8C3B),
            onTap: (int index) => setState(() => _selectedIndex = index),
            currentIndex: selectedIndex,
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.home,
                    size: 28,
                  ),
                  title: Text('')),
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.game_controller,
                    size: 28,
                  ),
                  title: Text('')),
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.wallet,
                    size: 28,
                  ),
                  title: Text('')),
            ],
          ),
        )),
  );

我希望我的标签栏看起来像这样

Answer 1

在这里，CLipRRect窗口小部件将您的窗口小部件切成矩形。
您的框阴影由于剪辑r rect被切断

删除剪辑小部件，然后尝试