有没有一种方法来创建圆角半径，坡度按钮，并与动态阴影？

Question

我创建与圆角半径和坡度按钮，但我也希望它的阴影对用户按下和释放反应。我试图从容器带装修，但似乎没有运气，因为我无法找到一个onRelease回调。所以我想，我在错误的方向。那么，有没有办法做到这一点？

Answer 1

此按钮正是我需要的：一个梯度，圆润的边角，动态阴影，波纹effect

Padding(
                                padding: const EdgeInsets.only(bottom: 50),
                                child: Transform.scale(
                                  scale: btnScale,
                                  child: GestureDetector(
                                    onTapCancel: () {
                                      setState(() {});
                                      btnHeight = 5;
                                      btnScale = 1.0;
                                    },
                                    onTapDown: (loc) {
                                      btnHeight = 0;
                                      btnScale = 0.99;
                                      setState(() {});
                                    },
                                    onTapUp: (loc) {
                                      setState(() {});
                                      btnHeight = 5;
                                      btnScale = 1.0;
                                    },
                                    child: Container(
                                      width: 190,
                                      height: 62,
                                      decoration: BoxDecoration(
                                          boxShadow: [
                                            new BoxShadow(
                                              blurRadius: 4,
                                              color: Colors.black12,
                                              offset: new Offset(
                                                  -btnHeight, btnHeight),
                                            ),
                                            new BoxShadow(
                                              blurRadius: 4,
                                              color: Colors.black12,
                                              offset: new Offset(
                                                  btnHeight, btnHeight),
                                            )
                                          ],
                                          borderRadius: BorderRadius.all(
                                              Radius.circular(100)),
                                          gradient: BtnTeal),
                                      child: Material(
                                        color: Colors.transparent,
                                        child: InkWell(
                                          borderRadius:
                                              (BorderRadius.circular(100)),
                                          onTap: () {},
                                          highlightColor:
                                              const Color(0xFF63DCA0),
                                          splashColor: Colors.teal,
                                          child: Center(
                                            child: Text(
                                              "LOG IN",
                                              style: TextStyle(
                                                fontWeight: FontWeight.bold,
                                                color: Colors.white,
                                                fontSize: 21,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ),