Flutter实现Figma径向渐变按钮：如何自定义径向渐变形状

可以。Flutter内置RadialGradient默认绘制正圆形径向渐变，实现非正圆（椭圆）径向渐变有两种成熟方案，可直接适配给出的Figma按钮设计参数：

• 方案1：通过渐变变换属性拉伸实现
  给RadialGradient配置transform参数，通过矩阵缩放把正圆渐变拉伸为目标比例的椭圆即可。对应Figma标注的渐变参数（中心位于底部中点、水平半径占比111.2%、垂直半径占比100%），仅需对水平方向做1.112倍缩放，就能匹配设计稿的椭圆渐变形态，开发成本最低。
• 方案2：自定义绘制精准还原
  如果需要零偏差对齐设计稿，可以在自定义Paint逻辑中，指定径向渐变的椭圆外接矩形直接绘制椭圆渐变，避免矩阵变换可能带来的位置偏移，适合视觉精度要求极高的场景。

还原该按钮的其他实现要点：

• Figma标注的背景为三层叠加效果，在Flutter中需要按从下到上的顺序组合：最底层为#FF7966实色层，中间层为底部橙色调椭圆径向渐变层，最上层为左上角半透明白色过渡到透明的高光线性渐变层，三层叠加才能还原设计稿的通透质感。
• 投影效果直接通过BoxShadow实现即可，参数对应为：偏移(0,8)、模糊半径25、颜色值#80FF7966。
• 渐变描边无法通过基础Border属性直接实现，可通过foregroundDecoration叠加1px渐变描边，或用ShaderMask包裹组件实现半透明白到透明的描边效果。

非正圆径向渐变核心代码参考：

// 对应Figma标注的椭圆径向渐变
RadialGradient(
  center: Alignment.bottomCenter, // 匹配at 50% 100%的渐变中心位置
  radius: 1.0,
  colors: const [
    Color(0x00FFFFFF), // 匹配50.52%位置的透明色
    Color(0x80FF7F37), // 匹配100%位置的半透明橙色
  ],
  stops: const [0.5052, 1.0],
  // 水平方向拉伸1.112倍，得到111.2%:100%比例的椭圆渐变
  transform: const HorizontalScaleTransform(1.112),
)

// 水平方向缩放变换实现
class HorizontalScaleTransform extends GradientTransform {
  final double scaleX;
  const HorizontalScaleTransform(this.scaleX);

  @override
  Matrix4 transform(Rect bounds, {TextDirection? textDirection}) {
    return Matrix4.identity()
      ..translate(bounds.center.dx)
      ..scale(scaleX, 1.0)
      ..translate(-bounds.center.dx);
  }
}

内容的提问来源于stack exchange，提问作者anilcngz