draggable_animation

A smooth, customizable drag-and-drop animation library for Flutter — inspired by iOS-style app rearranging. Create interactive menus or reorderable UI elements with ease.

---

Demo

✨ Features

• Drag & drop between menu areas
• Animated movement and reordering
• Works with Stack, AnimatedPositioned, and global coordinate tracking
• Responsive design — works on different screen sizes
• Support for both grid and row layouts

---

🚀 Getting Started

1. Add dependency

dependencies:
  draggable_animation : ^0.0.4

Usage

SizedBox(
  height: MediaQuery.of(context).size.height,
  width: MediaQuery.of(context).size.width,
  child: DraggableAnimation(
    items: List.generate(4 * 6, (index) => index), 
    displayer: DraggableAnimationGridDisplay(
      columnCount: 4,
      rowHeight: 80,
      spacingX: 20,
      spacingY: 30
    ),
    builder: (data)=> _buildAppIcon(),
    feedbackBuilder: (data) => _buildAppIcon(feedback: true),
  ),
),

items

list your item , it's also support generice type

DraggableAnimation(
  items: ['Google','Photo','Notepad','Facebook','etc'],
)

builder

is function that build your custom widget

DraggableAnimation(
  builder: (data) => _buildCard(data), //data row of your items
)

feedbackBuilder

Optional field , The function provide you build your custom widget when dragging

DraggableAnimation(
  feedbackBuilder: (data) => _buildCustomDragItem(data), //data row of your items
)

displayer

Property determine each item display as grid or row

DraggableAnimationGridDisplay

displayer: DraggableAnimationGridDisplay(
  columnCount: 4, // number of column per row
  rowHeight: 80, // height of each row
  spacingX: 20, // space between each column
  spacingY: 20 // space between each row
),

DraggableAnimationRowDisplay

displayer: DraggableAnimationRowDisplay(
  colWidth: 100, // width of each columns
  spacingX: 20 // space between each column
),

compareItemPosition

Optional field, Property customize compare position of drag_item and each items in list
return true mean change item position

DraggableAnimationGridDisplay (
  compareItemPosition: (dragItem, item) {
    print(dragItem.toString()); // show information detail relate to item
    print(item.toString()); // show information detail relate to item
    return false;
  },
)

percentag

Optional field, Property determine whether drag item and item match to change position
default value percentag is 0.5

DraggableAnimationGridDisplay (
  percentag : 0.5 // 50% match position 
)

onChange

Function for trigger when item change position

DraggableAnimation (
  onChange: (from, to) {},
)

onDragStart

Function for trigger when long press on item

DraggableAnimation (
  onDragStart: () {},
)

onDragStop

Function for trigger when drag item stop

DraggableAnimation (
  onDragStop: () {},
)

onDragMove

Function for trigger when drag item moving

DraggableAnimation (
  onDragMove: (detail) {},
)

👤 Contact Me

• GitHub: horlengg
• Portfolio: horleng.vercel.app

Feel free to open issues or pull requests if you'd like to contribute or report bugs.