NotchedCard - A Customizable Card with Notch Effect #

A Flutter plugin that provides a Card widget with a customizable notch effect on different sides (top, bottom, left, or right). Enhance your UI with unique and modern designs!

Screenshots #

Top Notch	Bottom Notch	Left Notch	Right Notch

Features #

✅ Supports notch effect on top, bottom, left, and right sides of the card.
✅ Fully customizable card appearance.
✅ Easy integration with existing Flutter projects.
✅ Works with any child widget inside the card.

Installation #

Add this to your pubspec.yaml file:

dependencies:
  notched_card: ^0.1.0

Then, run:

flutter pub get

Usage #

Basic Example #

use final guestKey = GlobalKey(); for addressing the widget that will be guest for Notched Card.

import 'package:flutter/material.dart';
import 'package:notched_card/notched_card.dart';

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

class MyApp extends StatelessWidget {
  final guestKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          fit: StackFit.loose,
          alignment: Alignment.topCenter,
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 0.0, left: 0),
              child: CircleAvatar(
                key: guestKey,
                child: Icon(Icons.arrow_back),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: NotchedCard(
                guestKey: guestKey,
                notchMargin: 5,
                shapeNotch: CircularDirectionalNotchedRectangle(
                    position: NotchCardPosition.top),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15.0)),
                clipBehavior: Clip.antiAlias,
                elevation: 20,
                color: Colors.green,
                margin: EdgeInsets.all(10),
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: IntrinsicHeight(
                    child: Column(
                      spacing: 30,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('Notched Card',
                            style: Theme.of(context).textTheme.displaySmall),
                        Text('This is a notched card and it is awesome',
                            style: Theme.of(context).textTheme.bodyMedium),
                        Text(';)',
                            style: Theme.of(context).textTheme.labelMedium),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

NotchPosition Enum #

• NotchPosition.top
• NotchPosition.bottom
• NotchPosition.left
• NotchPosition.right

Contributions #

Contributions are welcome! If you find any issues or have feature requests, feel free to open an issue or submit a pull request.

License #

MIT License. See the LICENSE file for details.