Neumorphic Overlay

Lightweight Flutter widget that shows a clean, soft‑neumorphic overlay using flutter_neumorphic_plus. Press the bundled button and an OverlayEntry appears with a neumorphic card and a built‑in close action.

Dart >=3.8.1 Flutter >=1.17.0 Depends on flutter_neumorphic_plus

Why

  • Simple overlay: A ready-to-use overlay with neumorphic aesthetics.
  • Zero boilerplate: Insert the widget, tap, and you have an overlay.
  • Safe defaults: Tuned depth, radius, and colors for a clean look out of the box.

Features

  • Neumorphic card overlay: Rounded, elevated card with soft shadows
  • One-tap show/hide: Built-in trigger button and close action
  • Overlay-based: Uses OverlayEntry for compositing above your UI

Getting started

Add the dependency.

From pub.dev (once published)

dependencies:
  neumorphic_overlay: ^0.0.1

From a local path (during development)

dependencies:
  neumorphic_overlay:
    path: ../neumorphic_overlay

Ensure you also have flutter_neumorphic_plus available (this package declares it as a dependency).

Usage

Basic example with a NeumorphicApp theme:

import 'package:flutter_neumorphic_plus/flutter_neumorphic.dart';
import 'package:neumorphic_overlay/neumorphic_overlay.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return NeumorphicApp(
      debugShowCheckedModeBanner: false,
      themeMode: ThemeMode.light,
      home: const Scaffold(
        body: Center(
          child: NeumorphicOverlay(),
        ),
      ),
    );
  }
}

What you get:

  • A neumorphic-styled button labeled “Show Neumorphic Overlay”.
  • Tapping it inserts an overlay with a neumorphic card and a “Close” button.

Works with MaterialApp too

You can also use this inside a MaterialApp. For best neumorphic theming and consistency, prefer NeumorphicApp from flutter_neumorphic_plus.

API

class NeumorphicOverlay extends StatefulWidget {
  const NeumorphicOverlay({Key? key});
}

The widget renders a neumorphic button that, when pressed, shows the overlay. Current version focuses on a sensible default experience; additional customization is planned.

How it works

  • Creates an OverlayEntry with a positioned Neumorphic card
  • Inserts it via Overlay.of(context).insert(entry)
  • Provides a built-in close button that removes the entry

Roadmap

  • Custom content slot (builder)
  • Positioning controls (center, anchor to widget, offsets)
  • Theming and style parameters (depth, color, shape)
  • Modal semantics (barrier color, tap-outside-to-dismiss)

Troubleshooting

  • Nothing appears: Ensure a parent Overlay exists (typically present by default in MaterialApp/NeumorphicApp).
  • Theme looks off: Use NeumorphicApp or provide a NeumorphicTheme to get consistent styling.

Examples

Longer examples and customizations can live in an /example app. If you clone this repo, run the example to try it out.

Changelog

See CHANGELOG.md for release notes.

License

Distributed under the terms of the license in LICENSE.

Credits

Built with flutter_neumorphic_plus.

Libraries

neumorphic_overlay