notched_card 0.1.1 copy "notched_card: ^0.1.1" to clipboard
notched_card: ^0.1.1 copied to clipboard

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!.

NotchedCard - A Customizable Card with Notch Effect #

pub package

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
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.

4
likes
150
points
35
downloads

Publisher

unverified uploader

Weekly Downloads

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!.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on notched_card