Neumorphic design in Flutter

Save

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

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

css.php

We've bought a Shopware Extension which is a hybrid App, which we can now offer in the Google Play Store and the IOS App Store. I'am still impressed how fast and how sharp the support team leads us through every process of the App-Store clarification. Very fast and useful response.

Markus Walter

Markus Walter

Founder, Das Apartment Living

Talk to Sales

Global

Live Chat
Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home