Neumorphic / neomorphic design in Flutter

Question

I've seen several articles recently about neomorphic design in Flutter. How do I implement that in my own project?

I know it is something about the decoration, but what specifically do I add?

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

Answer 1

You can play around with the actual colors but here is a light and dark example. If you see a different color scheme you like better then just take a screenshot and use Gimp or some other image editing software to get the hex colors from it.

Neumorphic light

• Background color: Color(0xFFEFEEEE)
• Light shadow: Colors.white.withOpacity(0.8),
• Dark shadow: Colors.black.withOpacity(0.1)

Code

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

Neumorphic dark

• Background color: Color(0xFF292D32)
• Light shadow: Colors.white.withOpacity(0.1),
• Dark shadow: Colors.black.withOpacity(0.4)

Code

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

Pub packages

• flutter_neumorphic
• clay_containers
• neumorphic
• nm_generators

See also

These articles and code were helpful in researching this.

• Neumorphism in user interfaces
• Neumorphism (Soft UI) in User interface design - Tutorial
• Dark Neumorphism UI Trend 2020
• Neumorphic designs with Flutter
• neuomorphic_container Pub package