flutter - 如何在 flutter 中改变盒子阴影的高度、宽度和不透明度？

Question

第一张图片中的按钮有一个模糊的阴影，其宽度小于按钮。

但是当我尝试在我的 flutter 应用程序中应用该设计时，它看起来不一样，而且我无法设置 ab 框阴影的宽度、高度和不透明度。我该怎么做？

应用程序飞镖

MaterialButton(
                          onPressed: () {},
                          textColor: Colors.white,
                          padding: const EdgeInsets.all(0.0),
                          child: Container(
                            padding: const EdgeInsets.symmetric(
                                vertical: 4.0, horizontal: 16.0),
                            decoration: BoxDecoration(
                                color: Color(0XFF00D99E),
                                borderRadius: BorderRadius.circular(16.0),
                                boxShadow: [
                                  Opacity(opacity: null),
                                  BoxShadow(
                                    color: Color(0XFF000000),
                                    offset: Offset(0.0, 8.0),
                                    blurRadius: 16.0,
                                  )
                                ]),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: <Widget>[
                                Padding(
                                  padding: EdgeInsets.all(4.0),
                                  child: Image.asset(
                                    'assets/icon-chat-notification.png',
                                    color: Colors.white,
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.all(4.0),
                                  child: Text('CART'),
                                )
                              ],
                            ),
                          ),
                        )

Answer 1

你可以这样做，技巧是使用负扩散半径，并补偿颜色的模糊/不透明度:

Container(
            width: 88,
            height: 30,
            decoration: BoxDecoration(
                color: Color(0xff00D99E),
                borderRadius: BorderRadius.circular(15),
                boxShadow: [
                  BoxShadow(
                      blurRadius: 8,
                      offset: Offset(0, 15),
                      color: Color(0xff00D99E).withOpacity(.6),
                      spreadRadius: -9)
                ]),

///相关代码是BoxShadow()

            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(
                  Icons.shopping_cart,
                  size: 12,
                ),
                SizedBox(width: 6),
                Text("CART",
                    style: TextStyle(
                      fontSize: 10,
                      color: Colors.white,
                      letterSpacing: 1,
                    ))
              ],
            ),
          ),

这是结果: