CODEWITHSUNDEEP
flutterdart
DolDurma
DolDurma

Reputation: 17321

Flutter make simple gradient shadow

I want to build a gradient shadow widget as shown below.

enter image description here

This gradient starts from black and end at white, how can I design this type of widget?

Upvotes: 3

Views: 6732

Answers (3)

CopsOnRoad
CopsOnRoad

Reputation: 267664

You can also try this:

Container(
  height: 200,
  width: 200,
  decoration: BoxDecoration(
    color: Colors.blue,
    boxShadow: [
      BoxShadow(
        color: Colors.black,
        offset: Offset(0, 10),
        blurRadius: 10,
        spreadRadius: 0.5,
      ),
    ],
  ),
)

Output

enter image description here

Upvotes: 4

CopsOnRoad
CopsOnRoad

Reputation: 267664

It mainly depends on your use case, for instance, if you want to show shadow you can directly use

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      height: 100,
      width: 100,
      color: Colors.blue,
    ),
    Container(
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: Colors.black,
            offset: Offset(0, 1),
            blurRadius: 10,
            spreadRadius: 0.5,
          ),
        ],
      ),
      height: 10,
      width: 100,
    )
  ],
)

Output:

enter image description here

Upvotes: 1

NoobN3rd
NoobN3rd

Reputation: 1271

It can be done like this,

Container(
        height:100,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.black, Colors.white],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter
          )
        ),
      ),

The result is : enter image description here

Are You looking for that result?

Upvotes: 5

Related Questions