Flutter - Implementing CSS radial gradients

Question

I am new to Flutter. Working on a background in an app but not able to emulate the exact CSS Radial gradient. This is what I intend to replicate:

background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(3,235,255,1) 0%, rgba(152,70,242,1) 100.2% );

This is what I tried in Flutter but not able to get the same effect (definitely missing many of the parameters in the gradient mentioned above)

Container(
          width: deviceSize.width,
          height: deviceSize.height,
          decoration: BoxDecoration(
            gradient: RadialGradient(
              colors: [
                Color.fromRGBO(3,235,255,1),
                Color.fromRGBO(152,70,242,1)
              ],
              radius: 1.0,
            ),
            boxShadow: [
              BoxShadow(blurRadius: 2),
            ],
          ),
          // child: const Image(
          //   image: AssetImage(
          //     'lib/assets/images/main_background.jpg',
          //   ),
          //   fit: BoxFit.cover,
          // ),
        ),

Would appreciate any suggestion, thanks in advance.

Answer 1

You need to use the center property of the RadialGradient to position the gradient.

Use the code below and it should give you the same design in Flutter as the CSS code:

 gradient: RadialGradient(
      center: Alignment(-0.8, -0.6),
      colors: [
        Color.fromRGBO(3, 235, 255, 1),
        Color.fromRGBO(152, 70, 242, 1)
      ],
      radius: 1.0,
    ),

PS: I came up with the values -0.8 and -0.6 from the docs:

Alignment(0.0, 0.0) represents the center of the rectangle. The distance from -1.0 to +1.0 is the distance from one side of the rectangle to the other side of the rectangle. Therefore, 2.0 units horizontally (or vertically) is equivalent to the width (or height) of the rectangle.

So that means 10% from your CSS code would correspond to -0.8, 20% would be -0.6, and so on.