3D effect at bottom of container in Flutter

Question

I want to create a 3D-like effect in my container. I dunno how to do it. Any help is appreciated.

Image

Thanks in advance.

Solution

That isn't anything 3D. It can easily be achieved by using the boxShadow property of decoration of the Container widget.

You can then play around with things like color, blurRadius to get the desired effect.

Sample code:

class Shadow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Shadow')),
      body: Container(
        color: Colors.black,
        child: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(40),
              boxShadow: [
                BoxShadow(
                  color: Colors.blue.withOpacity(0.5),
                  offset: Offset(0, 25),
                  blurRadius: 3,
                  spreadRadius: -10)
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Output

Comments

[Harish]

Thank you so much. It worked like charm. Sorry, I can't upvote because my reputation is below 15. I have marked it as solved.

[Nisanth Reddy]

Oh that's completely fine. Glad to have helped :) I upvoted your ealier question to increase it.

[Nisanth Reddy]

Cool, All the best for your Flutter journey.