如何在 flutter 的高架按钮中创建渐变颜色？

Question

我试图在 flutter 中创建一个渐变按钮，但在 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

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

代码示例

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),
        ),
      ),
    );
  }
}

截图

Try the full test code on DartPad