如何在 Flutter 中制作带有渐变背景的 ElevatedButton？

Question

我发现了多个关于如何使用带有渐变背景的 RaiseButton 的堆栈溢出示例，但是自从发布这些答案以来，RaiseButton 已被弃用。

我为带有渐变背景的 ElevatedButton 找到的大多数解决方案在某种程度上都不完整。 渐变不覆盖整个背景或阴影关闭。

这是我找到的最完整的答案，但是 onPress 高度呈现出不和谐的阴影。

下面我发布了一个答案，我最好尝试使用渐变背景（Q&A 风格）的 ElevatedButton。 请以您认为我的答案有所改进的方式发表评论！

Answer 1

经过大量的试验和错误，我设法重新创建了 ElevatedButton。

最终结果：

下面是我的可重复使用渐变按钮的代码。

import 'package:flutter/material.dart';

class GradientElevatedButton extends StatelessWidget {
  const GradientElevatedButton({
    Key? key,
    required this.child,
    required this.onPressed,
    required this.linearGradient,
  }) : super(key: key);

  final Widget child;
  final VoidCallback onPressed;
  final LinearGradient linearGradient;

  @override
  Widget build(BuildContext context) {
    return Padding(
      // ElevatedButton has default 5 padding on top and bottom
      padding: const EdgeInsets.symmetric(
        vertical: 5,
      ),
      // DecoratedBox contains our linear gradient
      child: DecoratedBox(
        decoration: BoxDecoration(
          gradient: linearGradient,
          // Round the DecoratedBox to match ElevatedButton
          borderRadius: BorderRadius.circular(5),
        ),
        child: ElevatedButton(
          onPressed: onPressed,
          // Duplicate the default styling of an ElevatedButton
          style: ElevatedButton.styleFrom(
            // Enables us to see the BoxDecoration behind the ElevatedButton
            primary: Colors.transparent,
            // Fits the Ink in the BoxDecoration
            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
          ).merge(
            ButtonStyle(
              // Elevation declared here so we can cover onPress elevation
              // Declaring in styleFrom does not allow for MaterialStateProperty
              elevation: MaterialStateProperty.all(0),
            ),
          ),
          child: child,
        ),
      ),
    );
  }
}