Neumorphic design in Flutter

Neumorphic is a design style used in graphical user interface. It is commonly identified by a soft and light look, (for which it is sometimes referred to as soft UI), So we will implement Neumorphic design in flutter.

Neumorphic design adds 3D feel for real buttons, which you can reach out and press, To Implement the design in flutter we need flutter package called flutter_neumorphic which offer simple and easy to implement feature like widgets in flutter.

Read more about Flutter app development services from mobikul.

Implementation

First Create a new flutter project and then add following dependency package in pubspec.yaml file.

In order to use Neumorphic design in Flutter remove default MaterialApp and Wrap the root widget of the app with NeumorphicApp as shown in below code.

Create a new Stateful Widget and import the neumorphic package. Create First Neumorphic Widget, Wrap a child inside Neumorphic to apply neumorphic design.

Shape :- define the shape for the child, there are three types – concave / convex/ flat.

Intensity :- The intensity of the Light, that influences the shadow of child. Double value range between (0 – 1).

Depth :- The distance of the widget from its parent widget. value range from (-20 to 20).

Output of Example code

Complete UI Example

NeumorphicAppBar :- App bar for the Neumorphic design similar to AppBar in flutter provided by Material library.

NeumorphicStyle :- Provide style for the Neumorphic widgets such as depth, intensity, shape.

Output

Conclusion

Thanks for reading this article ❤️

I hope this blog will help you to learn about how to implement neumorphic design in flutter and you will be able to implement it. For more updates, make sure to keep following Mobikul Blogs to learn more about mobile app development.

Happy Learning ✍️

Reference

https://pub.dev/packages/flutter_neumorphic