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!