Neumorphi c / neomorphi c дизайн во флаттере - PullRequest
Новая
       7

Neumorphi c / neomorphi c дизайн во флаттере

0 голосов
/ 12 февраля 2020

Я недавно видел несколько статей о дизайне neomorphi c во Флаттере. Как реализовать, чем в моем собственном проекте?

enter image description here

Я знаю, что это что-то о decoration, но что конкретно я добавлю? 

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    ???
  ),
),

Я добавляю свой собственный ответ ниже.

1 Ответ

2 голосов
/ 12 февраля 2020

Вы можете поиграть с реальными цветами, но вот светлый и темный пример. Если вы видите другую цветовую схему, которая вам больше нравится, просто сделайте скриншот и используйте Gimp или другое программное обеспечение для редактирования изображений, чтобы получить из него шестнадцатеричные цвета.

Neumorphi c light

enter image description here

  • Цвет фона: Color(0xFFEFEEEE)
  • Светлая тень: Colors.white.withOpacity(0.8),
  • Темная тень: Colors.black.withOpacity(0.1)

Код 

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.white.withOpacity(0.8),
        offset: Offset(-6.0, -6.0),
        blurRadius: 16.0,
      ),
      BoxShadow(
        color: Colors.black.withOpacity(0.1),
        offset: Offset(6.0, 6.0),
        blurRadius: 16.0,
      ),
    ],
    color: Color(0xFFEFEEEE),
    borderRadius: BorderRadius.circular(12.0),
  ),
),

Neumorphi c dark

enter image description here

  • Цвет фона: Color(0xFF292D32)
  • Светлая тень: Colors.white.withOpacity(0.1),
  • Темная тень: Colors.black.withOpacity(0.4)

Код 

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.white.withOpacity(0.1),
        offset: Offset(-6.0, -6.0),
        blurRadius: 16.0,
      ),
      BoxShadow(
        color: Colors.black.withOpacity(0.4),
        offset: Offset(6.0, 6.0),
        blurRadius: 16.0,
      ),
    ],
    color: Color(0xFF292D32),
    borderRadius: BorderRadius.circular(12.0),
  ),
),

Паб-пакеты

Спасибо @Dev за упоминание об этом в комментариях

См. Также

Эти статьи и код были полезны при исследовании этого.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...