How can I convert CSS LinearGradient to Flutter LinearGradient?

Question

I need to convert CSS LinearGradient to Flutter LinearGradient Here is the CSS code:

background-image: linear-gradient(134deg, #d6dcf4 0%, #ffffff 100%);

Here is my Flutter code:

gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [ Color(0x0ffd6dcf4).withOpacity(0),
                Colors.white.withOpacity(1),
              ],
              stops: [
              0.3,
              1
              ])

How does this should look on Flutter ?

user_15053425 · Answer

It's fairly simple , in flutter we can shave off other attributes of CSS.-

CSS Code -

background: linear-gradient(93.75deg, #4D8CC2 -5.17%, #AB33B0 109.64%);

Flutter

For rotation, we can alter the properties of begin & end in Linear Gradient. The begin will indicate where the gradient of color1 starts & end indicates the end of color1 gradient.

You can determine the angle using -

For your desired output, I obtained similar results at

begin: Alignment(-1,-1),
end: Alignment(1.7,0),

Flutter Code-

Just add the color codes -

 return Scaffold(
    body: Container(
        padding: EdgeInsets.all(20),
        width: double.infinity,
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment(-1,-1),
                end: Alignment(1.7,0),
                colors: [Color(0xffab33b0),Color(0xff4d8cc2)]
                )
            ),
        height: 1000,
     )

Here's the Flutter output-

Try Tweaking x & y coordinates in LinearGradientto obtain your desired results

DartPad Check DartPad Online

How can I convert CSS LinearGradient to Flutter LinearGradient?

1 Answers

Flutter