raflisusanto / reorderable_tree

Expandable Reorderable List

A wrapper around ReorderableListView that allows you to:

• Display a tree of items.
• Expand and collapse them.
• Reorder them.

Checkout our example:

Example

This example, inspired by the ReorderableListView documentation, creates a list using ExpandableReorderableList:

class MyList extends StatefulWidget {
  const MyList({Key? key}) : super(key: key);

  @override
  _MyListState createState() => _MyListState();
}

class _MyListState extends State<HomeTest> {
  final List<int> _items = List<int>.generate(50, (index) => index);

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;
    final oddItemColor = colorScheme.primary.withOpacity(0.05);
    final evenItemColor = colorScheme.primary.withOpacity(0.15);
    return ExpandableReorderableList<ValueKey<int>>(
      onReorder: (onReorderParam) {
        setState(() {
          var newIndex = onReorderParam.newIndex;
          if (onReorderParam.oldIndex < onReorderParam.newIndex) {
            newIndex -= 1;
          }
          final int item = _items.removeAt(onReorderParam.oldIndex);
          _items.insert(newIndex, item);
        });
      },
      children: _items.map((int item) {
        return ExpandableReorderableListItem<ValueKey<int>>(
          key: ValueKey<int>(item),
          builder: (_, child, model) {
            return ReorderableDragStartListener(
              index: model.index!,
              child: ListTile(
                title: Text('Item $item'),
                tileColor: item.isOdd ? oddItemColor : evenItemColor,
              ),
            );
          },
        );
      }).toList(),
    );
  }
}