It’s Already 2020 and Neumorphism is trending…
- Neumorphism is based on New + Skeuomorphism.
- It’s a UI trend that came to rise this year.
Want to know more?
Discover 700+ Neumorphism designs on Dribbble. Your resource to discover and connect with designers worldwide.dribbble.com
Discover the World’s Top Designers & Creative Professionals who specialize in Graphic Design, UX Design, UI Design…dribbble.com
Well, Let’s try to implement it 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 web also.
First We will Create Convex Widget
After Creating Convex its time to create Concave Widget
Similarly, add Icon of thumbs up(👍🏽) in new concave and convex Widget,
Now Let’s wrap it up with the MainScreen 🥂
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
Link to the Source Code: NeumorphismFlutter
Have any questions feel free to reach out to me!
The latest Tweets from Vishwesh Soni💙 (@Vishweshsoni). Software Engineer Student of Information Technology at DA-IICTtwitter.com