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

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

您可以简单地用

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 上尝试完整的测试代码

Answer 2

这是使用backgroundBuilder为ElevatedButton创建渐变背景的原生且正确的方法！

代码示例：

 ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundBuilder: (context, state, child) {
      return Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.purple, Colors.blue],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: const Icon(Icons.apple),
      );
    },
  ),
  child: const Icon(Icons.apple),
  onPressed: () {},
)

良好的编码！ 🩵