Flutter：如何为Container实现渐变边框？现有方案无效求解决

你的代码里外层容器的渐变无法显示，核心原因是LinearGradient的begin和end设置为同一个Alignment值，导致渐变没有过渡效果。另外，还需要调整渐变的方向来匹配设计要求。

以下是修正后的代码：

class PoppinButton extends StatelessWidget {
  const PoppinButton({Key? key, required this.text}) : super(key: key);
  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 55,
      padding: const EdgeInsets.all(2), // 该内边距对应渐变边框的厚度
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(30),
        // 调整渐变方向，实现从右上到左下的渐变边框
        gradient: const LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: [
            Color(0xFFFF53C0), // 粉色
            Color(0x00FF53C0), // 透明粉色
          ],
          stops: [0.15, 1.0],
        ),
      ),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          // 按钮内部渐变背景
          gradient: const LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              Color(0xFFB6116B),
              Color(0xFF3B1578),
            ],
            stops: [0.1507, 1.044],
          ),
        ),
        child: Center(
          child: Text(
            text,
            style: GoogleFonts.poppins(
              textStyle: const TextStyle(
                color: Colors.white,
                fontSize: 18,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

关键修正说明： #

• 外层容器的LinearGradient设置了正确的渐变方向，让粉色到透明的过渡效果正常显示，形成渐变边框。
• 内层容器的borderRadius和外层保持一致，避免边角错位。
• 若要完全匹配Figma设计，可微调stops参数和颜色透明度值。

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