Introducing Flutter-Neumorphic: A Comprehensive Neumorphic UI Kit

Published on by Flutter News Hub

Introducing Flutter-Neumorphic: A Comprehensive Neumorphic UI Kit

Embracing the Future of UI Design with Neumorphism

Neumorphic design, an innovative approach to user interface (UI) design, mimics the physical properties of real-world objects by simulating depth and curvature. Flutter-Neumorphic, an open-source library, empowers developers to effortlessly implement this captivating design style in their Flutter applications.

Key Features of Flutter-Neumorphic

  • Complete Neumorphic Widget Suite: Access a comprehensive range of widgets, from buttons and inputs to sliders and app bars, all designed with the signature neumorphic aesthetic.
  • Highly Customizable: Personalize your UI by adjusting various attributes such as light source, depth, intensity, and surface intensity, giving you complete control over the look and feel of your app.
  • Customizable Box Shapes: Choose from a variety of box shapes, including circle, rounded rectangle, stadium, and path, to create unique and visually appealing designs.
  • Accessibility Features: Enhance usability and accessibility by adding optional borders to neumorphic elements, ensuring a seamless experience for all users.
  • Neumorphic Theme: Centralize your design preferences with a comprehensive NeumorphicTheme that unifies the look and feel of your entire application.

Getting Started with Flutter-Neumorphic

  1. Install the Package: Add flutter_neumorphic to your project's pubspec.yaml file and run flutter pub get.
  2. Import the Library: Include import 'package:flutter_neumorphic/flutter_neumorphic.dart'; in your Dart files.

Example Code Snippets

Neumorphic Container:

Neumorphic(
  style: NeumorphicStyle(
    shape: NeumorphicShape.concave,
    boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12)),
    depth: 8,
    lightSource: LightSource.topLeft,
    color: Colors.grey,
  ),
  child: ...
)

Neumorphic Button:

NeumorphicButton(
  child: Text('Click Me'),
  onPressed: () {},
  style: NeumorphicStyle(
    shape: NeumorphicShape.convex,
    boxShape: NeumorphicBoxShape.circle(),
    depth: 6,
    lightSource: LightSource.bottomRight,
  ),
)

Neumorphic Switch:

NeumorphicSwitch(
  value: true,
  onChanged: (value) {},
  style: NeumorphicStyle(
    shape: NeumorphicShape.flat,
    boxShape: NeumorphicBoxShape.stadium(),
    depth: 4,
    lightSource: LightSource.left,
  ),
)

Conclusion

Harness the power of neumorphic design to create stunning and engaging mobile applications with Flutter-Neumorphic. Its comprehensive widget suite, customizable attributes, and ease of use make it the perfect choice for developers looking to stay ahead of the curve in UI design.

Flutter News Hub