個人開発者が勉強がてらまとめているだけのサイトです

並べ替えリスト Reorderable List

行をつかんで上下にドラッグすると、他の行がよけて順番を入れ替えられるリスト。

別名
ドラッグで並べ替えソータブルリスト順番入れ替えSortable ListDrag to Reorder
動き
つかんで持ち上がる上下にドラッグ他の行がよける
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます(初回は数秒かかります)

別タブで大きく開く ↗

どんなもの?

ToDo の優先順位やプレイリストの曲順を、指で直接並べ替えられます。

ReorderableListView を使い、各行に重複しない key を付けます。

PC やWebでは右端に自動でつかむ場所(≡)が出て、スマホでは行の長押しで持ち上がります。

並べ替え結果は onReorderItem で受け取ります(古い onReorder と違い、位置のずれを補正済みの番号が来ます)。

こんなときに

  • ユーザーが自分で決める順番がある(優先度・お気に入りの並び・曲順)

避けたい場面

  • 日付順や名前順など、自動で決まる順番の一覧

最小コード

ReorderableListView(
  onReorderItem: (oldIndex, newIndex) {
    setState(() => items.insert(newIndex, items.removeAt(oldIndex)));
  },
  children: [
    for (final item in items)
      ListTile(key: ValueKey(item.id), title: Text(item.title)),
  ],
)

使うウィジェット

ReorderableListViewReorderableDragStartListener

似ているもの・一緒に見たいもの

触ってみる ↗
ジェスチャー スワイプで削除Swipe to Dismiss

リストの行を横にスワイプすると、下から色付きの背景が現れ、そのまま行が消える。

横にスワイプ