Here's a professional and well-structured README.md file for your Flutter package that you can use on GitHub and pub.dev:


LongPressDraggableCard

A customizable Flutter widget that allows users to drag a card horizontally to increase or decrease a count โ€” perfect for cart quantities, counters, or any use case where a drag gesture adjusts a numeric value.

๐Ÿ“ฝ Demo

Demo


โœจ Features

  • ๐Ÿ” Horizontal drag gesture for count control
  • ๐Ÿ“ˆ Increase or decrease values dynamically
  • โœ… Limit value using maxCount
  • ๐ŸŽจ Customizable feedback (fadeContainer) and UI (child)
  • โšก Lightweight and easy to integrate

๐Ÿ“ฆ Installation

Add this to your pubspec.yaml:

dependencies:
  flutter_longpressdrag_fluctuation: ^1.0.0

Then run:

flutter pub get

๐Ÿš€ Usage

LongPressDraggableCard(
  axis: Axis.horizontal,
  count: quantity,
  maxCount: 50,
  onChanged: (value) {
    setState(() {
      quantity = value;
    });
  },
  fadeContainer: Container(
    height: 200,
    width: 500,
    margin: EdgeInsets.all(12),
    padding: EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text("", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        SizedBox(height: 8),
        Text("", style: TextStyle(fontSize: 14, color: Colors.grey[700])),
        SizedBox(height: 12),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('', style: TextStyle(fontSize: 16)),
            Text('', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.green)),
          ],
        ),
      ],
    ),
  ),
  child: Container(
    height: 200,
    width: 500,
    margin: EdgeInsets.all(12),
    padding: EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text("name", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        SizedBox(height: 8),
        Text("description", style: TextStyle(fontSize: 14, color: Colors.grey[700])),
        SizedBox(height: 12),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('Qty: $quantity', style: TextStyle(fontSize: 16)),
            Text('\$10', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.green)),
          ],
        ),
      ],
    ),
  ),
);

๐Ÿ”ง Parameters

Property Type Description
axis Axis Direction of drag (default: Axis.horizontal)
count int Current value to display and update
maxCount int Maximum count limit
onChanged Function(int) Callback triggered when the count changes
fadeContainer Widget Transparent feedback widget shown while dragging
child Widget Main card widget shown to the user

๐Ÿ“Œ How it Works

  • LongPressDraggableCard listens for long press + horizontal drag.

  • Internally, it uses onDragUpdate to check the offset.dx:

    • Positive โ†’ increase count
    • Negative โ†’ decrease count
  • When the drag ends, onDragEnd resets the feedback offset.


๐Ÿงช Example Use Cases

  • Shopping cart item quantity control
  • Rating widgets with adjustable values
  • Custom counters

๐Ÿ’ก Tips

  • Always include a transparent fadeContainer to ensure draggable feedback works.
  • Use state management (like setState, Provider, etc.) to persist and respond to value changes.

๐Ÿ“„ License

MIT