quick_shadow

A Flutter package that adds inner shadow support to any widget β€” Container, Button, Card, and more.

Flutter’s built-in BoxDecoration only supports outer shadows.
quick_shadow fills that gap with a simple and performant QuickShadow widget using a Canvas-based even-odd path technique.

πŸš€ Try it Live

✨ Features

  • βœ… Add inner shadow to any widget
  • βœ… Supports BorderRadius (rounded corners & circles)
  • βœ… Supports multiple shadows
  • βœ… Perfect for Neumorphism UI
  • βœ… Includes QuickShadowContainer convenience widget
  • βœ… Zero external dependencies (pure Flutter)

πŸ“Έ Screenshots

Add your screenshots inside a screenshots/ folder in your repo root.

Basic Shadow Neumorphism Buttons Cards
Basic Neumorphism Button Cards

πŸ“¦ Installation

Add this to your pubspec.yaml:

dependencies:
  quick_shadow: ^0.0.3

Then run:

flutter pub get

Import it in your Dart file:

import 'package:quick_shadow/quick_shadow.dart';

πŸš€ Usage

Basic Inner Shadow

QuickShadow(
  shadows: [
    Shadow(
      color: Colors.black38,
      blurRadius: 10,
      offset: Offset(4, 4),
    ),
  ],
  borderRadius: BorderRadius.circular(16),
  child: Container(
    width: 150,
    height: 150,
    decoration: BoxDecoration(
      color: Color(0xFFE0E0E0),
      borderRadius: BorderRadius.circular(16),
    ),
  ),
)

Neumorphism β€” Pressed Effect

QuickShadow(
  shadows: [
    Shadow(
      color: Colors.black26,
      blurRadius: 12,
      offset: Offset(6, 6),
    ),
    Shadow(
      color: Colors.white70,
      blurRadius: 12,
      offset: Offset(-6, -6),
    ),
  ],
  borderRadius: BorderRadius.circular(20),
  child: Container(
    width: 160,
    height: 60,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      color: Color(0xFFE0E5EC),
      borderRadius: BorderRadius.circular(20),
    ),
    child: Text('PRESSED'),
  ),
)

QuickShadowContainer (Shorthand)

QuickShadowContainer(
  width: 200,
  height: 60,
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Color(0xFFE0E5EC),
    borderRadius: BorderRadius.circular(14),
  ),
  shadows: [
    Shadow(
      color: Colors.black26,
      blurRadius: 10,
      offset: Offset(4, 4),
    ),
  ],
  child: Text('Hello Inner Shadow'),
)

Circular Shape

QuickShadow(
  shadows: [
    Shadow(
      color: Colors.black26,
      blurRadius: 14,
      offset: Offset(6, 6),
    ),
  ],
  borderRadius: BorderRadius.circular(75),
  child: Container(
    width: 150,
    height: 150,
    decoration: BoxDecoration(
      color: Color(0xFFE0E5EC),
      shape: BoxShape.circle,
    ),
  ),
)

πŸ“˜ API Reference

QuickShadow

Parameter Type Required Description
shadows List<Shadow> βœ… List of inner shadows to apply
borderRadius BorderRadius? ❌ Match with child’s border radius for proper clipping
child Widget βœ… The widget to apply the inner shadow to

QuickShadowContainer

Parameter Type Required Description
shadows List<Shadow> βœ… List of inner shadows
decoration BoxDecoration βœ… Box decoration (color, borderRadius, etc.)
width double? ❌ Container width
height double? ❌ Container height
padding EdgeInsetsGeometry? ❌ Inner padding
alignment AlignmentGeometry? ❌ Child alignment
child Widget? ❌ Optional child widget

🎯 How Shadow Offset Works

Offset Shadow appears on
Offset(4, 4) Top & Left inner edges
Offset(-4, -4) Bottom & Right inner edges
Both together All edges β€” neumorphism pressed look

πŸ’‘ Best Use Cases

  • Neumorphism UI
  • Pressed buttons
  • Soft cards
  • Inner depth effects
  • Modern dashboard components

🀝 Contributing

Found a bug or want a new feature?

Open an issue or submit a PR on GitHub:
quick_shadow Repository

Contributions are always welcome.

πŸ“„ License

This package is licensed under the MIT License.
See the LICENSE file for details.

Libraries

quickshadowflutter