Flutter Oval Gradient To Produce Image below

Question

I'm having some trouble producing the image at the end of this question.

I created a container with a decoration with the correct border radius to curve the edges, my only problem is the transparent oval gradient. I can only create a circular one.

(I am new to flutter, and this is really the only component that got me stuck for hours :| )

image here (imgur)

Thing on picture isn't gradient, it's glow. This may be useful: https://stackoverflow.com/questions/56420822/how-to-add-a-neon-glow-effect-to-an-widget-border-shadow — Dmytro Rostopira, Aug 13 '19 at 18:31
But I would use sliced png in your case (go to "centerSlice Property" section https://medium.com/jlouage/flutter-boxdecoration-cheat-sheet-72cedaa1ba20) — Dmytro Rostopira, Aug 13 '19 at 18:34
@DimaRostopira the BoxShadow doesn't work for this case, I think. It would be nice if the shadow would paint from the border to the center instead of the center to the borders, in this case. — Guilherme Ferreira, Aug 13 '19 at 18:52

score 2 · Accepted Answer · answered Aug 16 '19 at 07:30

you can do one of two possibilities:

use 2 box shadow and add the inner shadow as your background color

like this

Container(
      width: 250.0,
      height: 80.0,
      alignment: Alignment.center,
      child: Text("Hello World"),
      decoration: BoxDecoration(
        color: Colors.transparent,
        boxShadow: [
          BoxShadow(
            color: Colors.blue,
            offset: const Offset(0.0, 0.0),
          ),
          BoxShadow(
            color: Colors.white,
            offset: const Offset(0.0, 0.0),
            spreadRadius: -12.0,
            blurRadius: 12.0,
          ),
        ],
      ),
    );

or you use a radial gradient it's not quite the same but it does the transparency

Container(
      width: 180.0,
      height: 80.0,

      alignment: Alignment.center,
      child: Text("Hello World"),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5.0),
        border: Border.all(color: Colors.black),
        gradient: RadialGradient(
          colors: [
            Colors.transparent,
            Colors.blue
          ],
          focal: Alignment.center,
          radius: 2.0
        )
      ),
    );

Thank! with that I actually got pretty close to the expected result, I just added some opacity to the colors to make them more transparent — Guilherme Ferreira, Aug 19 '19 at 12:44

Flutter Oval Gradient To Produce Image below

1 Answers1