FlutterArtist Manual Sorting ReorderableListView

Structure of the example
Currency49aShelf
Currency49aReorderableListItemsView

In programming, "Manual sorting" refers to the process of organizing data elements in a specific order defined by the user, rather than relying on built-in sorting functions or automated algorithms. Instead, the application allows users to rearrange elements directly through Drag & Drop interactions.

Demo49a

In this article, we will explore how to use ReorderableListView, a standard Flutter widget, in conjunction with the FlutterArtist ecosystem to implement this functionality.

Download FlutterArtist Demo
See also similar examples, manual sorting with SortableGridView:
FlutterArtist Manual Sorting ReorderableGridView Example

1. Structure of the example

2. Currency49aShelf

In FlutterArtist, to enable manual reordering of ITEM(s) on the client-side, the prerequisite is setting the sorting strategy in BlockConfig to SortStrategy.manual.

No ADS

currency49a_shelf.dart

class Currency49aShelf extends Shelf {
  @override
  ShelfStructure defineShelfStructure() {
    return ShelfStructure(
      filterModels: {},
      blocks: [
        Currency49aBlock(
          name: Currency49aBlock.blkName,
          description: null,
          config: BlockConfig(clientSideSortStrategy: SortStrategy.manual),
          filterModelName: null,
          formModel: null,
          childBlocks: [],
        ),
      ],
    );
  }

  Currency49aBlock findCurrency49aBlock() {
    return findBlock(Currency49aBlock.blkName) as Currency49aBlock;
  }
}

See more automatic sorting examples based on SortModel:
FlutterArtist Sort DropdownSortPanel Example
FlutterArtist Multi Sort ex1

3. Currency49aReorderableListItemsView

We use the .builder() constructor of ReorderableListView to optimize performance for long lists.

Currency49aReorderableListItemsView (**)

Widget buildContent(BuildContext context) {
  List<CurrencyInfo> currencyInfos = block.items;
  //
  return ReorderableListView.builder(
    padding: EdgeInsets.all(5.0),
    itemCount: currencyInfos.length,
    onReorder: _onReorder,
    itemBuilder: (context, index) {
      CurrencyInfo currencyInfo = currencyInfos[index];
      return Currency49aListItem(
        key: Key("Currency-${currencyInfo.id}"),
        currencyInfo: currencyInfo,
        selected: block.isCurrentItem(currencyInfo),
        onCurrencyPressed: _onCurrencyPressed,
      );
    },
  );
}
...

Handling the Reorder Event

When a user drops an item into a new position, the onReorder event is triggered. Here, we need to update the item's position within the Block's data list.

onReorder

void _onReorder(int oldIndex, int newIndex) {
  int newIdx = newIndex > oldIndex ? newIndex - 1 : newIndex;
  block.moveItemByIndexPosition(
    oldIndexPosition: oldIndex,
    newIndexPosition: newIdx,
  );
}