Design Trends 2020: Neumorphism Using Flutter

Neumorphism Effect

It’s Already 2020 and Neumorphism is trending…

Neumorphsim

• Neumorphism is based on New + Skeuomorphism.
• It’s a UI trend that came to rise this year.

Want to know more?

Neumorphism designs, themes, templates and downloadable graphic elements on Dribbble

Search Designs on Dribbble

Well, Let’s try to implement using Flutter Framework.

Note: It is assumed that you have Flutter setup and this tutorial is for Mobile Applications only, though you can implement it on the web also.

First we will create a Convex Widget

After creating a convex widget, its time to create a Concave Widget

Similarly, add Icon of thumbs up(👍🏽) in new concave and convex Widget,

Link to the Thumbsup Concave and Convex Widgets.

Now let’s wrap it up with the MainScreen 🥂

HeartScreen.dart

We have Placed AnimatedContainer For Button Animation.

AnimatedContainer(
   width: MediaQuery.of(context).size.width / 4,
   height: MediaQuery.of(context).size.height / 8,
   duration: Duration(seconds: 2),
       child: isPressed
            ? convexWithThumb("Synth", Color(0xFF649166))
            : concaveWithThumb("Beat"),
     ),

Hurrah 👏 ..! Neumorphism Effect Worked ….

Now you all can explore more on this on your own.

Remote Controller Example

Remote Controller

Link to the Source Code: NeumorphismFlutter

Thanks For Reading 💯
For more about programming, follow me and Aubergine Solutions, so you’ll get notified when we write new posts.

Have any questions feel free to reach out to me!

Vishwesh Soni💙 (@Vishweshsoni) | Twitter

vishweshsoni - Overview