Circle with inset shadow and gradient
Design like that is called Neumorphic design.
The central point of Neumorphism are shadows, which are giving the interface this feel of a surface carefully carved with a spherical drill.
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(bevel),
color: Colors.grey.shade200,
boxShadow: [
BoxShadow(
blurRadius: bevel,
offset: -blurOffset,
color: Colors.white,
),
BoxShadow(
blurRadius: bevel,
offset: blurOffset,
color: Colors.grey.shade400
)
]),
child: child,
);
The above code creates a white bevel for light and a dark one for shadow.
But this medium article shows how you can do it better.
There's also this nifty library that I use called the neumorphic container library that helps to handle this for me.
EDIT: @nilsi shared a much better library that makes neumorphic design simple in flutter: flutter_neumorphic
Comments
-
nilsi over 1 year
I wonder how to achieve the following effect. A circle with an inset shadow that also has a gradient.
I managed to get an inset shadow but with even color. I would need a gradient on the inset I think.
Container( height: 300, decoration: BoxDecoration( shape: BoxShape.circle, boxShadow: [ BoxShadow( color: Color(0xffa3b1c6), // darker color ), BoxShadow( color: Color(0xffe0e5ec), // background color spreadRadius: -12.0, blurRadius: 12.0, ), ], ), ),
Gives the following: