Search code examples
flutterdartshadow

Circle with inset shadow and gradient

I wonder how to achieve the following effect. A circle with an inset shadow that also has a gradient.

enter image description here

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:

enter image description here

Solution

  • 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