Neumorphism Flutter Widget— Dart extension#2
Create Flutter Widget with a Neumorphism Design
Welcome to the dart extension series. An article about the extension method I used to develop Flutter apps. In the previous article, I explored Map sorting. If you missed it, you can read it through the link at the end of this article.
The second article in a series of darts extensions will explore neumorphism widgets in flutter apps. Neumorphism is a new trend in UI design. You may find many designs using this style on several platforms like dribble, Pinterest, etc.
To realize widget neumorphism, adding shadows is a must. To create a shadow on a Widget, the common way is to wrap it in a Container. We need the BoxShadow from BoxDecoration property. And one of the widgets that provide BoxDecoration is the Container widget. So basically, in this method, we are going to add Neumorphism functionality to the Widget by wrapping it in a Container.
This is the extension method:
properties:
- double
borderRadius: creates the corner of the box rounded. - Offset
offset: Creates an offset. The first argument setsdx, the horizontal component, and the second setsdy, the vertical component. - double
blurRadius: The standard deviation of the Gaussian to convolve with the shadow’s shape. Applied to BoxShadow property. - Color
topShadowColor: shadow color that appears on the top-left side. - Color
bottomShadowColor: shadow color that appears on the bottom-right side.
I just apply the shadow for the top-left and bottom-right sides. You can also customize the method so you can add shadow to all sides by adding a BoxShadow into the list and setting Offset( —, + )for the bottom-left and Offset( +, — ) for the top-right side.
Implementation
I found an awesome article about neumorphism design by Kanhaiya Sharma. as he mentioned
“Neumorphism design is all about selecting the right color palettes. For the Neumorphism Effect, you need 3 shades of the same color.”
Now, I will take 3 example colors and implement them in the extension method that we have above.
- Light Shadow:
Color(0xFFFFFFFF) - Main background and Element color:
Color(0xFFE0E5EC) - Dark Shadow:
Color(0xFFA3B1C6)
we will set the background color of
Scaffoldwith main background color,
next for the widget add light shadow and dark shadow
Since we are extending Widget, we can add a neumorphism method after the “close brackets” of the Widget. And don't forget, you have to import when the widget and the extension method are separated in a different file.
dark shadow as a bottomShadowColor and for topShadowColor we use light shadow. And here is the result:
now we have a beautiful share button with a neumorphism style. As you can see in the first image, I created some button widgets with a neumorphism style. You can try it on dartpad through the link below
Thank you for reading to the end. As I mentioned earlier, this is the second darts extension series. If you are curious about the first article, you can read it via the link below.
Btw, I will collect all the extension methods in the GitHub repository. You can get it via the link below. If you have an extension method and want to share it, feel free to contribute to this repository.
