【Flutter】ReorderableListViewでリスト順序を自由に！

2023年5月30日
2025年1月14日
Widget
Flutter, List, widget, WidgetOfTheWeek

Widget

Table of Contents

対象者

Flutterを使用したアプリ開発経験があり、その中でリストの項目を動的に並び替える方法を学びたいと考えている方
ユーザー体験を向上させるために、アプリケーションのUIをカスタマイズする方法を理解したい方
自身の開発スキルを向上させて、より複雑で洗練されたアプリケーションを開発することを目指している方

はじめに

Flutterを使用してアプリ開発をしている皆さん、今までの開発経験でリストの項目をユーザーが自由に並び替えられる機能を実装したいと思ったことはありませんか？また、そのような機能を追加することでユーザー体験が向上し、アプリの評価がさらに上がると考えたことはありませんか？そのための具体的な方法を知りたいと思っていませんか？

もしそのような疑問や思いがあるなら、この記事はまさにあなたのために書かれたものです。この記事では、Flutterの「ReorderableListView」というウィジェットを使ったリストの項目の並び替えの実装方法を詳しく解説しています。また、よりユーザー体験を向上させるためのカスタマイズ方法も紹介します。

この記事を読めば、ReorderableListViewの使い方を理解し、自分のアプリに活用するための具体的な手順を学ぶことができます。さらに、自身の開発スキル向上の一助となるでしょう。是非、最後までお読みいただき、次のステップに進むための知識を得てください。

ReorderableListViewとは

定義と使用方法

ReorderableListViewは、Flutterのウィジェットで、ユーザーがリストの項目を対話的にドラッグして並べ替えることができるリストを作成します。このウィジェットを使用することで、ユーザーがリスト内のアイテムを直感的に移動させることが可能になり、使いやすさや体験を向上させることができます。

以下に、ReorderableListViewの基本的な使用例を示します。

ReorderableListView(
  onReorder: (oldIndex, newIndex) {
    // 項目の並べ替えを行うロジック
  },
  children: <Widget>[
    // リストの項目
  ],
)

主要なパラメーター

ReorderableListViewには、以下のような主要なパラメーターが存在します。

onReorder
子ウィジェットが新しい位置にドラッグされたときに呼び出される関数です。この関数は2つの整数を引数に取り、それぞれドラッグされたアイテムの元の位置と新しい位置を示します。
children
リスト内に表示するウィジェットのリストです。各ウィジェットは一意のキーを持つ必要があります。これにより、項目の位置が変更された後でもリスト項目を区別することができます。

以上が、ReorderableListViewの定義と主要なパラメータについての基本的な説明です。このウィジェットを使用することで、ユーザーがリスト項目を直感的に並べ替えることが可能なアプリケーションを作成することができます。

ReorderableListViewの実装

コンストラクタの種類

ReorderableListViewには基本的に二つのコンストラクタがあります：ReorderableListViewとReorderableListView.builderです。前者はリスト全体を一度に生成しますが、後者は必要に応じてリストの項目を遅延生成します。これは大量のデータを扱う場合に非常に役立ちます。

以下に、それぞれのコンストラクタを使用した基本的な使用例を示します。

// ReorderableListView
ReorderableListView(
  onReorder: (oldIndex, newIndex) {},
  children: <Widget>[
    // リストの項目
  ],
)

// ReorderableListView.builder
ReorderableListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      key: Key('$index'),
      title: Text('Item $index'),
    );
  },
  onReorder: (oldIndex, newIndex) {},
)

onReorder関数の役割

onReorderはReorderableListViewの必須のパラメーターで、アイテムが新しい位置にドラッグされたときに呼び出される関数です。この関数は2つの整数、oldIndexとnewIndexを引数に取り、それぞれドラッグされたアイテムの元の位置と新しい位置を示します。

ReorderableListViewでは、ユーザーが項目をドラッグして新しい位置に移動すると、その位置の変更は即座に画面に反映されます。しかし、内部のデータ構造は自動的には更新されません。そのため、onReorderコールバック内でデータを手動で更新することが必要です。

ReorderableListView(
  onReorder: (oldIndex, newIndex) {
    setState(() {
      if (oldIndex < newIndex) {
        newIndex -= 1;
      }
      final Item item = _items.removeAt(oldIndex);
      _items.insert(newIndex, item);
    });
  },
  children: <Widget>[
    // リストの項目
  ],
)

以上が、ReorderableListViewの基本的な実装方法と、onReorder関数の重要な役割についての説明です。これらの知識を持つことで、ユーザーがリスト内のアイテムを直感的に並べ替えることができるアプリケーションを作成することが可能となります。

キーの重要性

ReorderableListViewで項目を一意に識別するためには、各項目に一意のキーを割り当てることが重要です。キーはFlutterのウィジェットのライフサイクル管理に使用され、特にリストの項目が動的に変化する場合（例えば項目が移動したとき）に重要となります。

キーがない場合、Flutterはウィジェットの位置を追跡することができず、これが項目の状態が意図しない方法でリセットされる原因となります。そのため、リストの項目が移動したときに状態を保持するためには、各項目に一意のキーを割り当てることが重要です。

以下に、キーを割り当てたReorderableListViewの項目の例を示します。


ReorderableListView(
  onReorder: (oldIndex, newIndex) {},
  children: <Widget>[
    ListTile(
      key: Key('item1'),
      title: Text('Item 1'),
    ),
    ListTile(
      key: Key('item2'),
      title: Text('Item 2'),
    ),
    // その他の項目
  ],
)

ReorderableListViewのカスタマイズ

ドラッグハンドルのカスタマイズ

ReorderableListViewは、ユーザーが項目を直感的に移動できるように、ドラッグ可能なハンドルを提供します。しかし、デフォルトのハンドルはある程度汎用的であるため、アプリケーションのブランドやデザインによりよく合うようにカスタマイズすることが推奨されます。

Flutterでは、項目のドラッグハンドルをカスタマイズするには、ReorderableDragStartListenerウィジェットを使用します。このウィジェットを使用すると、特定の部分をドラッグ操作の開始点として定義できます。

以下に、カスタムドラッグハンドルを持つReorderableListViewの項目の例を示します。

ReorderableListView(
  onReorder: (oldIndex, newIndex) {},
  children: <Widget>[
    ListTile(
      key: Key('item1'),
      title: Text('Item 1'),
      leading: ReorderableDragStartListener(
        child: Icon(Icons.drag_handle),
        index: 0,
      ),
    ),
    // その他の項目
  ],
)

その他のカスタマイズオプション

ReorderableListViewは、scrollDirectionやpaddingなどの他のカスタマイズオプションも提供しています。これにより、リストのスクロール方向を変更したり、リスト内の項目間のスペースを調整したりすることができます。

以下に、これらのオプションを使用してカスタマイズしたReorderableListViewの例を示します。

ReorderableListView(
  onReorder: (oldIndex, newIndex) {},
  scrollDirection: Axis.horizontal,
  padding: const EdgeInsets.symmetric(vertical: 16.0),
  children: <Widget>[
    // リストの項目
  ],
)

これらのカスタマイズオプションを活用することで、アプリケーションのデザインやブランドに合ったユーザー体験を提供することが可能となります。

一般的な問題とその解決策

ReorderableListViewを使用する際には、いくつかの一般的な問題が発生する可能性があります。

1つ目は、項目のキーが一意でない場合、Flutterはどの項目が移動したのかを正確に把握できないため、期待通りに動作しない可能性があります。これを解決するには、各項目に一意のキーを割り当てることで、Flutterが項目の移動を正確に追跡できるようにします。

2つ目は、リストの項目が多すぎるとパフォーマンスが低下する可能性があります。これは、ReorderableListViewが全ての子ウィジェットを一度に描画するためです。これを解決するには、ListView.builderを使って表示する項目を制限するか、SliverReorderableListを使用して大量の項目を効率的に管理することを検討してみてください。

Q&A

Q: ReorderableListViewとは何ですか？
A: ReorderableListViewはFlutterが提供するウィジェットの一つで、これを利用することでユーザーはリストの項目をドラッグ＆ドロップで簡単に並べ替えることができます。

Q: onReorder関数は何のために必要ですか？
A: onReorder関数はリストの項目が移動されたときに呼び出されるコールバック関数です。これを用いることで、アプリケーションは新しい順序を適切に反映することができます。

Q: ReorderableListViewの項目に一意のキーが必要な理由は何ですか？
A: 各項目が一意のキーを持つことで、Flutterはどの項目がどこに移動したかを追跡することが可能になります。これにより、ユーザーが項目を移動させたときの動作を正確に反映することができます。

Q: タップしたWidgetに変化を起こしたいですが、どうすれば良いですか
A: ReorderableListVieの関数を使うだけでは解決できませんでした。変化させたいWidgetをStatefulWidgetにして、タップしたら状態が変化させるようにしたら実装できました。詳しくは以下。

【Flutter】並び替え中のリストのUIを変える

まとめ

FlutterのReorderableListViewについて学びました。これはFlutterが提供するウィジェットの一つで、ユーザーがリストの項目をドラッグ＆ドロップで並べ替えることができる機能を実現します。このウィジェットの使用方法と主要なパラメーターを理解しました。特に、onReorderというコールバック関数の役割を把握しました。これは項目が移動されたときに呼び出されるもので、アプリケーションが新しい順序を適切に反映するためには必須です。

また、ReorderableListViewの項目管理方法についても理解しました。特に、各項目が一意のキーを持つことの重要性を学びました。これはFlutterがどの項目がどこに移動したかを追跡するために必要です。

さらに、このウィジェットのカスタマイズ方法を学びました。特に、ドラッグハンドルのカスタマイズとその他のカスタマイズオプションについて知識を深めました。これにより、アプリケーションのユーザーエクスペリエンスを向上させるための機会を見つけました。

最後に、ReorderableListViewの具体的な使用例と一般的な問題、そしてそれらの問題の解決策について学びました。これにより、ReorderableListViewを活用して、より使いやすく、直感的なユーザーインターフェースを作成することができるようになりました。

参考

ソース(main.dartにコピペして動作確認用)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  final List<int> _items = List<int>.generate(10, (int index) => index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter ReorderableListView'),
      ),
      body: ReorderableListView(
        header: Text('header'),
        padding: const EdgeInsets.symmetric(
          vertical: 16.0,
          horizontal: 8,
        ),
        key: ValueKey('ReorderableListView'),
        onReorder: (int oldIndex, int newIndex) {
          setState(() {
            if (oldIndex < newIndex) {
              newIndex -= 1;
            }
            final int item = _items.removeAt(oldIndex);
            _items.insert(newIndex, item);
          });
        },
        children: _items.map<Widget>((int item) {
          return ListTile(
            key: Key('$item'),
            tileColor: item % 2 == 0 ? Colors.amber[200] : null,
            title: Text('Item $item'),
            leading: Icon(Icons.menu),
            trailing: IconButton(
              icon: Icon(Icons.delete),
              onPressed: () {
                setState(() {
                  _items.remove(item);
                });
              },
            ),
          );
        }).toList(),
      ),
    );
  }
}