CODEWITHSUNDEEP
flutteruser-interfacecontainers
Harish
Harish

Reputation: 748

3D effect at bottom of container in Flutter

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.

Upvotes: 4

Views: 3989

Answers (1)

Nisanth Reddy
Nisanth Reddy

Reputation: 6405

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

enter image description here

Upvotes: 9

Related Questions