Flutter Drag list Widget

September 25, 2019 Widgets

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)),
    );
  },
),