如何在Flutter中创建符合预期效果的渐变按钮？

我需要实现一个类似示例图的黄黑渐变按钮，但当前代码生成的效果和预期不符，求帮忙修正：

现有代码 #

class CustomButton extends StatelessWidget {
  final String? text;
  double width;
  final Function()? onPressed;
  CustomButton({this.width = 0.8, this.text, this.onPressed});
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        child: Center(
            child: CustomTextWidget(
          text: text!,
          textColor: AppColors.BLACK_COLOR,
          fontWeight: FontWeight.bold,
          fontSize: 1.1,
        )),
        height: ScreenSize.heightSize * 0.08,
        width: width.sw,
        decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [Colors.yellow, Colors.black],
              begin: Alignment.topRight,
              end: Alignment.topRight,
              stops: [0.7, 0.8],
              tileMode: TileMode.repeated,
            ),
            borderRadius: BorderRadius.circular(4)),
      ),
    );
  }
}

效果对比 #

• 预期效果：
• 当前效果：

问题分析与修正 #

你的LinearGradient参数设置错误导致渐变失效：

• begin和end设置为同一个Alignment.topRight，渐变没有方向，自然看不出效果
• stops和tileMode的配置不符合预期的渐变逻辑，tileMode.repeated会重复渐变，这不是你想要的效果

基础修正版 #

调整渐变方向为左上到右下，移除错误的tileMode和不合理的stops：

class CustomButton extends StatelessWidget {
  final String? text;
  double width;
  final Function()? onPressed;
  CustomButton({this.width = 0.8, this.text, this.onPressed});
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        child: Center(
            child: CustomTextWidget(
          text: text!,
          textColor: AppColors.BLACK_COLOR,
          fontWeight: FontWeight.bold,
          fontSize: 1.1,
        )),
        height: ScreenSize.heightSize * 0.08,
        width: width.sw,
        decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [Colors.yellow, Colors.black],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            borderRadius: BorderRadius.circular(4)),
      ),
    );
  }
}

贴近预期优化版 #

如果想要更接近示例图中“黄色占比更大，渐变过渡集中在右侧”的效果，可以调整stops和颜色节点：

gradient: const LinearGradient(
  colors: [Colors.yellow, Colors.yellow, Colors.black],
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
  stops: [0.0, 0.7, 1.0], // 前70%区域保持黄色，剩余部分过渡到黑色
),

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