Flutter UI Tutorial: Building neumorphic UI

We all know Flutter is a great option when it comes to building beautiful UIs, but the truth is that it is always going to be challenging without proper knowledge and experience in UX/UI design.

Building CRED like neumorphic UI

Hello guys, In this shitty post, we will see how to build CRED like application using UI concept called Neumorphic UI. I know this word might scare you a bit but trust me it’s not scary as it sound. Well will get through this in detail.

So what is Neumorphism exactly ?

“Neumorphism”, it’s a new, minimal way to design with a soft, extruded plastic/clay look. It’s almost as if the interface has been vacuum-formed like CRED application.

• Some of the example/resource for neumorphic UI

There are several application that is build on top of neumorphic UI such as CRED, Language App etc.

1. CRED App(Credit Card Management App)
2. Language App (My Recent Crappy Project😜)
3. https://github.com/fornewid/neumorphism.
4. https://github.com/CRED-CLUB/synth-ios

• So, Now how to make neumorphic UI?

Alright lets get our hand dirty:

This example is inspired from Suragch from stackoverflow post. Suragch is a great flutter developer. Don’t forget to check out his work.

We have already seen the output before. lets check the implementation here.

1. Light Neumorphic

Output:

2. Dark Neumorphic

Output:

[TL,DR]

So just to wrap up, You might have noticed that we are only playing with boxShadow(That is correct,Some of you probably never used before). We are only playing with the boxShadow and got this beautiful UI. Alright that enought for today. Let discuss about some of the ready made package we can use out of the box.

• Some package that you can use out of the box?

There are several package that you can use out of the box .My favourites are

1. flutter_neumorphic

flutter_neumorphic | Flutter Package

2. clay_containers

clay_containers | Flutter Package

3. neumorphic

neumorphic | Flutter Package

Thanks guys, I hope you like this shitty post. please make sure to give clap 👏 and leave some engagement. let me know if you have anything on your mind. I would love to connect with you.

Checkout more blog from CodingWithTashi. Connect me on GitHub or Instagram or YouTube.