[Flutter]リストビュー(ListView)の要素(item)を移動(move)できるようにするには？

どうも、ちょげ(@chogetarou)です。

リストビューの要素を移動できるようにする方法を紹介します。

方法
まとめ
小話

方法

リストビューの要素を移動できるようにするには、ListViewではなくReorderableListViewを使います。

まず、ReorderableListViewの「children」にリストビューの要素を指定します。

ReorderableListView(
  children: [
    for (int index = 0; index < _items.length; index++)
      ListTile(
        key: Key('$index'),
        tileColor: _items[index].isOdd
            ? Colors.blue
            : Colors.blue.withOpacity(0.2),
        title: Text('Item ${_items[index]}'),
      ),
  ],
),

ポイントは、Keyを指定する点です。

ReorderableListViewの要素には、Keyを指定しなければいけません。

そして、引数「reOrder」に、要素を並び替える処理を追加します。

ReorderableListView(
  children: [
    /*Item*/
  ],
  onReorder: (int oldIndex, int newIndex) {
    setState(() {
      if (oldIndex < newIndex) {
        newIndex -= 1;
      }
      final int item = _items.removeAt(oldIndex);
      _items.insert(newIndex, item);
    });
  },
),

引数「oldIndex」は操作前のインデックス、引数「newIndex」には操作後のインデックスが格納されます。

この２つの引数を使って、要素を並び替える処理を行います。

これで、要素を移動できるリストビューが実装されます。

以下は、使用例です。

  var _items = List<int>.generate(10, (int index) => index);
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: ReorderableListView(
          children: [
            for (int index = 0; index < _items.length; index++)
              ListTile(
                key: Key('$index'),
                tileColor: _items[index].isOdd
                    ? Colors.blue
                    : Colors.blue.withOpacity(0.2),
                title: Text('Item ${_items[index]}'),
              ),
          ],
          onReorder: (int oldIndex, int newIndex) {
            setState(() {
              if (oldIndex < newIndex) {
                newIndex -= 1;
              }
              final int item = _items.removeAt(oldIndex);
              _items.insert(newIndex, item);
            });
          },
        ),
      ),
    );
  }