如何在 Flutter 中的按钮周围添加阴影？

Question

我正在尝试重新创建一个类似于下图所示的按钮。但是我无法在它后面添加微弱的阴影。

这就是我想要实现的目标：

这是我的按钮的样子：

这是我的代码：

                Container(
                  height: 45,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        Color(0xFFFF8C3B),
                        Color(0xFFFF6365),
                      ],
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                    ),
                    borderRadius: const BorderRadius.all(
                      Radius.circular(25.0),
                    ),
                  ),
                  child: Center(
                    child: GestureDetector(
                      onTap: () {},
                      child: Text(
                        'Create Account',
                        textAlign: TextAlign.left,
                        style: TextStyle(
                          fontFamily: "Netflix",
                          fontWeight: FontWeight.w600,
                          fontSize: 18,
                          letterSpacing: 0.0,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),

Answer 1

您可以向 中添加粉红色阴影Container：

Container(
            height: 60,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  Color.fromRGBO(255, 143, 158, 1),
                  Color.fromRGBO(255, 188, 143, 1),
                ],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
              ),
              borderRadius: const BorderRadius.all(
                Radius.circular(25.0),
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.pink.withOpacity(0.2),
                  spreadRadius: 4,
                  blurRadius: 10,
                  offset: Offset(0, 3),
                )
              ]
            ),
            child: Center(
              child: GestureDetector(
                onTap: () {},
                child: Text(
                  'Create Account',
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontFamily: "Netflix",
                    fontWeight: FontWeight.w600,
                    fontSize: 18,
                    letterSpacing: 0.0,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),

注意：我还更改了渐变颜色，使其看起来更像图片。

结果：