Neumorphism in Flutter

Neumorphism  become quite popular in recently and lot of designers try to make amazing looking UI using Neumorphism technique.  Before jump in to the coding let’s understand what is Neumorphism.

 

What is Neumorphism?

Neumorphism can be consider as a new Skeuomorphism . Skeuomorphism design is mimicking real world object as it is. In Neumorphism it add some in and out shadow to give nice look and feel like a real modern object.

How to design Neumorphism?

Designing a Neumorphism is kind of easy. Basically by adding dark shadow to the one side and adding light shadow to the other side make this effect work.

Neumorphism in Flutter

  1. First create a container with required with and height.
  2. Next set scaffold background color as a Color.fromARGB(255, 238, 238, 238) .
  3. Next set decoration to container.
  4. The color of the decoration should be Color.fromARGB(255, 238, 238, 238) which is same as background of scaffold.
  5. Next add two box shadow with one with positive offset and one with negative offset.
    
    Scaffold(
        backgroundColor: Color.fromARGB(255, 238, 238, 238),
        body: Center(
          child: Container(
            width: 350,
            height: 100,
            decoration: BoxDecoration(
              color: Color.fromARGB(255, 238, 238, 238),
              boxShadow: [
                BoxShadow(offset: Offset(10, 10),color: Color.fromARGB(80, 0, 0, 0),blurRadius: 10),
                BoxShadow(offset: Offset(-10, -10),color: Color.fromARGB(150, 255, 255, 255),blurRadius: 10)
              ]
            ),
          ),
        ),
      )
    

Conclusion

I hope you get a better idea about how to make Neumorphism design in flutter and you can try this with different colors to see different result.

You Will Like Also