Basics of Neumorphism in Flutter
Arguably already the most popular trend in graphic design in 2020 is Neumorphism. Achieving this art style could be dreadful when implementing it in native mobile, but in Flutter — piece of cake.
When you want a widget in Flutter to have this neumorphic effect, it’s as simple as playing around with the boxShadow or shadows values of any widget (any widget that has that property of course, if it does not, then you’ll have to find a workaround), giving it a dark-colored shadow and a light-colored shadow to achieve this gradual emboss effect.
Neumorphic Container
In this example, let’s take a look at how to transform a Container widget into a Neumorphic Container. First step, of course, is to create your Container widget. For this example, I’ll be giving it a random size to illustrate the effect. Also, it is important that the color of your container be the same as its background (I’ll be changing the Scaffold's backgroundColor to emphasize what we’re trying to achieve).
(Optional) Then, define its shape through its decoration property. Here, I added a borderRadius value to theBoxDecoration object to create a rounded rectangle shape (of course, you’ll also have to move the color of the Container to the BoxDecoration object).
At this point the screen should still show nothing because the Container has the same color of its background. Don’t worry, it won’t stay like that for long.
Next is to add the dark-colored shadow to the object through the BoxDecoration’s boxShadow property. At this point, it’s important to define the angle of your light source as it is crucial in bringing out neumorphism. Most common angle would be at 135° or from the northwest. Play around with the value of the offset, color and the blurRadius until you’re happy with the effect.
At this point, something should finally appear in the screen.
Lastly, add the light-colored shadow which should have the opposite offset values of the dark-colored shadow and of course, a lighter color value.
And just like magic, the Container is now a Neumorphic Container!
There you go! Now you’re ready to design for 2020 (sort of).
Neumorphic Text
The same steps can be easily achieved with Text widgets through the TextStyle's shadows property.
Easy~~
In my opinion, Neumorphism is an amazing evolution of minimalism and thanks to Flutter’s robust UI capabilities, it can really go from the minds of designers to actual implementation of developers. Here is a quick design I whipped up using the simple steps in this story
And we’re done!
If this article helped you a 👏 would be nice and possibly share this to help others too. Good luck designing!
