如何在底部和所有侧面创建带有盒子阴影的容器

Question

我尝试创建一个带有盒子阴影的容器，但无法获得我想要的相同结果。这是我achieved，但我想显示带有圆形边缘的阴影和带有底部阴影的水平列表之一和带有所有侧阴影的第二个。我还需要低厚度的阴影。我的列表有背景图片和文字。请帮助我如何实现这一目标。

我的代码

 Container(
                height: 180.0,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: response.data.length,
                    itemBuilder: (context, index) {
                      return GestureDetector(
                        behavior: HitTestBehavior.translucent,
                        onTap: () {},
                        child: Container(
                          decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: CachedNetworkImageProvider(
                                    response.data[index].imageUrl,
                                  ),
                                  fit: BoxFit.fill)),
                          margin: EdgeInsets.only(bottom: 6.0, right: 10.0),
                          width: MediaQuery.of(context).size.width - 100,
                          child: Container(
                            width: MediaQuery.of(context).size.width - 100,
                            margin: EdgeInsets.only(left: 8.0, right: 6.0),
                            decoration: BoxDecoration(
                              boxShadow: <BoxShadow>[
                                BoxShadow(
                                    color: Color(0xff000000).withOpacity(.9),
                                    blurRadius: 10.0,
                                    spreadRadius: 2.0,
                                    offset: Offset(0.0, 180))
                              ],
                            ),
                            child: Padding(
                              padding: const EdgeInsets.fromLTRB(
                                  10.0, 35.0, 5.0, 0.0),
                              child: Text(
                                response.data[index].name.toUpperCase(),
                                style: GoogleFonts.roboto(
                                    textStyle: TextStyle(
                                        fontSize: 15,
                                        fontWeight: FontWeight.bold,
                                        color: Color(0xffFFFFFF))),
                              ),
                            ),
                          ),
                        ),
                      );
                    }),
              )

Answer 1

这可能会有所帮助

boxShadow: [
              BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 2,
                  blurRadius: 3,
                  offset: Offset(0, 4)),
            ],

RefStackoverflow ref

Answer 2

使用 BoxShadow 的 offset 属性来控制阴影的可见性和 radius 属性来控制阴影的厚度。