CODEWITHSUNDEEP
user-interfaceflutterdartgradientcustom-painting
Christian X
Christian X

Reputation: 2187

Flutter how to paint custom gradients

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

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

d

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.

Upvotes: 3

Views: 2836

Answers (1)

Christian X
Christian X

Reputation: 2187

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

Upvotes: 3

Related Questions