CODEWITHSUNDEEP
flutterflutter-layout
Guilherme Ferreira
Guilherme Ferreira

Reputation: 185

Flutter Oval Gradient To Produce Image below

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)

Upvotes: 1

Views: 3080

Answers (1)

key
key

Reputation: 1404

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

Upvotes: 2

Related Questions