Круг с тенями и градиентом

Question

Интересно, как добиться следующего эффекта. Круг со вставленной тенью, которая также имеет градиент.

Мне удалось получить тень со вставкой, но с ровным цветом. Мне нужен градиент на вставке, я думаю.

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,
        ),
      ],
    ),
  ),

Дает следующее:

Answer 1

Такой дизайн называется Neumorphi c design.

Центральная точка Neumorphism - тени, которые придают интерфейсу ощущение поверхности, тщательно вырезанной с помощью сферического сверла.

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,
);

Приведенный выше код создает белый скос для светлого и темный для тени.

Но эта средняя статья показывает, как вы можете сделать это лучше.

Есть также эта изящная библиотека, которую я использую под названием neumorphi c контейнерная библиотека , которая помогает мне справиться с этим.

РЕДАКТИРОВАТЬ: @nilsi поделился гораздо лучшей библиотекой, которая делает дизайн neumorphi c простым в трепетании: flutter_neumorphi c