Flutter 如何绘制自定义渐变

Question

I recently experienced a problem when I was trying to create following AppBar with gradient.

When I tried to replicate this design in flutter with the colors rose = Color(0xFFec15ee), purple = Color(0xFF8561f5) and blue = Color(0xFF1eaefc) and set the alignment property accordingly it somehow gave me not the expected result

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))
    )

Just imagine the opacity wouldnt be there. As you can see I only want the rose to be aligned at the bottomLeft and not to expand up to topLeft as shown in the example.

My question how can I do that. There must a way to do that within CustomPainter yet I haven't found the right way.

Answer 1

pskinks comment was right and I totally overlooked this option. Using the Alignment(x,y) was the key here.

Here is the solution for my above problem.

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))
    )