Flutter 如何绘制自定义渐变

Question

我最近在尝试创建带有渐变的跟随 AppBar 时遇到了问题。

当我试图复制这个设计时，颜色会变得扑朔迷离玫瑰=颜色（0xFFec15ee），紫色 = 颜色 (0xFF8561f5) 和 blue = Color(0xFF1eaefc) 并相应地设置对齐属性它以某种方式给了我预期的结果

BoxDecoration(
      gradient: LinearGradient(
        colors: [
          AppColors.roseGradientColor,
          AppColors.purpleInAppGradientColor,
          AppColors.blueInAppGradientColor
        ],
        stops: [
          0.0,
          0.05,
          1.0
        ],
        begin: Alignment.bottomLeft,
        end: Alignment.topRight
      ),
        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25))
    )

想象一下不透明不会存在。如您所见，我只希望玫瑰在 bottomLeft 对齐，而不是向上扩展到 topLeft，如示例所示。

我的问题是我该怎么做。在 CustomPainter 中必须有一种方法可以做到这一点，但我还没有找到正确的方法。

Answer 1

pskinks 评论是正确的，我完全忽略了这个选项。使用 Alignment(x,y) 是这里的关键。

这是我上述问题的解决方案。

BoxDecoration(
      gradient: LinearGradient(
        colors: [
          AppColors.roseGradientColor,
          AppColors.purpleInAppGradientColor,
          AppColors.blueInAppGradientColor
        ],
        begin: Alignment(-0.7,12),
        end: Alignment(1,-2),
      ),
        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(25),bottomRight: Radius.circular(25))
    )

Flutter 如何绘制自定义渐变

Flutter how to paint custom gradients

user-interface

gradient

custom-painting

dart

flutter