flutter_longpressdrag_fluctuation 0.0.1

Published Aug 12, 2025

SDKflutter

Platformandroidioswindowslinuxmacosweb

Flutter Long Press Drag Fluctuation

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

✨ 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