I want to create a 3D-like effect in my container. I dunno how to do it. Any help is appreciated.
Thanks in advance.
I want to create a 3D-like effect in my container. I dunno how to do it. Any help is appreciated.
Thanks in advance.
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