Site icon Flutter Packages | Pub dev Packages – Flutter Mobile App World

Flutter Drag list Widget

Flutter list widget that allows to drag and drop items as well as define custom drag handle widget.

DragList

Flutter list widget that allows to drag and drop items as well as define custom drag handle widget.

Getting Started

Add DragList component to your widget tree:

child: DragList<String>(
  items: ['Tuna', 'Meat', 'Cheese', 'Potato', 'Eggs', 'Bread'],
  itemExtent: 72.0,
  builder: (context, item, handle) {
    return Container(
      height: 72.0,
      child: Row(children: [
        Spacer(),
        Text(item),
        Spacer(),
        handle,
      ]),
    );
  },
),

Optionally, provide custom handle builder:

child: DragList<String>(
  // ...
  handleBuilder: (context) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Container(
        color: Colors.green,
        child: Text('Handle'),
      ),
    );
  },
),

Add other optional parameter if needed:

child: DragList<String>(
  // ...
  animDuration: Duration(milliseconds: 500),
  dragDelay: Duration(seconds: 1),
  handleAlignment: -0.3,
  scrollDirection: Axis.horizontal,
  onItemReorder: (from, to) {
    // handle item reorder on your own
  },
),

Use handleless constructor if you want list item to be dragged no matter where it’s tapped on:

DragList<String>.handleless(
  // ...
  builder: (context, item) {
    return Container(
      height: 72.0,
      child: Center(child: Text(item)),
    );
  },
),

Download Source Code on GitHub

https://github.com/tomwyr/drag-list
Exit mobile version