flutter - Flutter-自定义按钮上的InkResponse

我想用渐变和确切的位置来创建该按钮。由于无法使用RaisedButton，因此不得不从头开始重新创建一个。除了一件事，一切都非常完美:我没有RaisedButton拥有的Ink响应。我以为在树中添加InkResponse小部件会成功，但是它什么也没做:/

@override
  Widget build(BuildContext context) {
    return Material(
      elevation: 7.0,
      borderRadius: BorderRadius.all(Radius.circular(10.0)),
      child: InkResponse(
        child: Ink(
          decoration: BoxDecoration(
            gradient: gradient,
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
          ),
          child: Container(
            constraints: BoxConstraints.expand(height: 48),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                SizedBox(width: 48),
                Expanded(
                  child: Center(
                    child: Text(
                      text,
                      style: MC_callToActionGradientText,
                    ),
                  ),
                ),
                SizedBox(
                  width: 48.0,
                  child: Icon(
                    icon,
                    color: Colors.white,
                    size: 23.0,
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

最佳答案

您必须提供对InkResponse的某种回调才能使飞溅可见，例如onTap，onLongPress等。但是，如果您像这样@Tipu提到的话，这样做似乎很奇怪，在这种情况下，使用InkWell更容易。它看起来像这样:

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      elevation: 7.0,
      borderRadius: BorderRadius.all(Radius.circular(10.0)),
      child: InkWell(
        onTap: () {},
        child: Ink(
          decoration: BoxDecoration(
            gradient: LinearGradient(colors: [Colors.red, Colors.pink]),
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
          ),
          height: 48,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              SizedBox(width: 48),
              Expanded(
                child: Center(
                  child: Text(
                    "Hello",
                  ),
                ),
              ),
              SizedBox(
                width: 48.0,
                child: Icon(
                  Icons.send,
                  color: Colors.white,
                  size: 23.0,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

关于flutter - Flutter-自定义按钮上的InkResponse，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/63483607/