InnerShadowContainer 🪞

InnerShadowContainer is a highly customizable Flutter widget that adds beautiful and soft inner shadows to any container, ideal for neumorphic UI and modern soft design styles. Perfect for developers building elegant UIs in Flutter using subtle depth effects.

Use it to bring neumorphism, container shadows, and soft UI designs to life in your app with zero dependencies.

✨ Features

✅ Inner shadow on any side: top-left, top-right, bottom-right, bottom-left
✅ Fully customizable blur, offset, radius, and shadow color
✅ Lightweight, dependency-free and pure Flutter implementation
✅ Supports circular, rounded, or rectangular containers
✅ Perfect for neumorphic and soft UI designs

🚀 Installation

Add this to your pubspec.yaml file:

dependencies:
  inner_shadow_container: ^1.0.4

Then run:

flutter pub get

🔧 Usage

import 'package:inner_shadow_container/inner_shadow_container.dart';

InnerShadowContainer(
  height: 120,
  width: 120,
  backgroundColor: Colors.white,
  borderRadius: 20,
  blur: 6,
  offset: Offset(4, 4),
  shadowColor: Colors.black26,
  isShadowTopLeft: true,
  isShadowBottomRight: true,
  child: Center(
    child: Icon(Icons.star, size: 40, color: Colors.orange),
  ),
);

📐 Parameters

Parameter	Type	Default	Description
`height`	`double?`	`null`	Height of the container
`width`	`double?`	`null`	Width of the container
`borderRadius`	`double`	`12.0`	Border radius of the container
`backgroundColor`	`Color`	`Colors.white`	Background color of the container
`blur`	`double`	`4.0`	Shadow blur radius
`offset`	`Offset`	`Offset(4, -3)`	Shadow offset direction
`shadowColor`	`Color`	`Colors.black26`	Color of the inner shadow
`isShadowTopLeft`	`bool`	`false`	Apply inner shadow on top-left side
`isShadowTopRight`	`bool`	`false`	Apply inner shadow on top-right side
`isShadowBottomRight`	`bool`	`false`	Apply inner shadow on bottom-right side
`isShadowBottomLeft`	`bool`	`false`	Apply inner shadow on bottom-left side
`child`	`Widget?`	`null`	Optional child inside the container
`alignment`	`Alignment`	`Alignment.center`	Child alignment

🧪 Example App

The example below showcases all shadow directions and combinations:

InnerShadowContainer(
  height: 140,
  width: 140,
  borderRadius: 20,
  backgroundColor: Colors.white,
  blur: 8,
  offset: Offset(5, 5),
  shadowColor: Colors.black12,
  isShadowTopLeft: true,
  isShadowTopRight: true,
  isShadowBottomLeft: true,
  isShadowBottomRight: true,
  child: Center(
    child: Padding(
      padding: EdgeInsets.all(8.0),
      child: Text(
        'All Corners Shadow',
        style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600),
        textAlign: TextAlign.center,
      ),
    ),
  ),
);

💻 View the full example: example/lib/main.dart

💡 Pro Tip

You can combine multiple shadows for enhanced depth:

isShadowTopLeft: true,
isShadowTopRight: true,
isShadowBottomLeft: true,
isShadowBottomRight: true,

This gives a full immersive neumorphic feel to your containers.

📄 License

Made with ❤️ in Flutter — Powered by creativity and clean UI!