Flutter - 从 figma 实现径向渐变按钮

Question

我正在尝试在 Figma 中实现以下设计。 Figma 的检查面板给出了这个按钮的 CSS 代码，如下所示：

// COLORS:
// background: linear-gradient(0deg, #FF7966, #FF7966),
// radial-gradient(111.2% 100% at 50% 100%, rgba(255, 255, 255, 0) 50.52%, rgba(255, 127, 55, 0.5) 100%),
// linear-gradient(153.43deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 83.33%);

// BORDERS:
// border: 1px solid;
// border-image-source: linear-gradient(153.43deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 83.33%);

// SHADOWS
// box-shadow: 0px 8px 25px 0px #FF796680;

但是我觉得Figma中的径向渐变不是圆形，有什么办法可以改变Flutter中径向渐变的形状吗？ 你可以在这里找到 DartPad 链接：

https://dartpad.dev/?id=ec3b820dd5a31c8aafce0f9f9aff037d

Answer 1

您可以使用“ LinearGradient ”代替“ RadialGradient ”

将 BoxDecoration 内的渐变属性替换为：

LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Colors.white.withOpacity(0.0),
              const Color(0xFFFF7F37),
            ],           
          ),