如何在颤振中的提升按钮中创建渐变颜色？

Question

我试图在颤动中创建一个渐变按钮，但ElevatedButton即使颜色设置为透明，也会显示一些阴影或其结构。

在这里我用于DecoratedBox应用渐变颜色有什么方法可以应用渐变ElevatedButton吗？

我使用过的代码

               child: DecoratedBox(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                    colors: [
                      Colors.red,
                      Colors.blue,
                    ],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  )),
                  child: ElevatedButton(
                      onPressed: () {
                        // Navigator.of(context).push(MaterialPageRoute(
                        //     builder: (BuildContext context) => RegisterScreen()));
                      },
                      style: ElevatedButton.styleFrom(
                          primary: Colors.transparent,
                          onPrimary: Colors.transparent),
                      child: Text(
                        "Register",
                        style: TextManager.btnText,
                      )),
                ),

通过将海拔设置为 0 已解决，但当我单击按钮时，该东西也可见。将初始颜色设置为透明也不起作用。

输出按钮在这里

Answer 1

您可以简单地child用一个Ink小部件包装您的属性。通过这样做，您将能够应用渐变并保持按钮的提升效果。

代码示例

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        padding: const EdgeInsets.all(0.0),
        elevation: 5,
      ),
      onPressed: () {},
      child: Ink(
        decoration: BoxDecoration(
          gradient: LinearGradient(colors: [Colors.blue, Colors.cyan]),
        ),
        child: Container(
          padding: const EdgeInsets.all(10),
          constraints: const BoxConstraints(minWidth: 88.0),
          child: const Text('OK', textAlign: TextAlign.center),
        ),
      ),
    );
  }
}

截屏

在 DartPad 上尝试完整的测试代码