【日本語版】【Flutter】Widget of the Week – #42 ReorderableListView【要約】

動画

要約

  • ReorderableListViewを使うとリストのアイテムの順番をユーザーが変えることができるようになる
  • ユーザーはリストのアイテムを長押しすることでアイテムを掴むことができ、ドラッグしてドロップすることで好きな位置に変えることができる

内容

Flutterで何かを作ったことがある方であれば、ListView widgetを使ったことがあるでしょう。
ListViewではアイテムの表示やリストのスクロールができます。

しかし、ListViewではできないことがあります。それはユーザーにリストの順番を変えさせることです。

リスト内でアイテムを移動させたい場合はReorderableListViewを使ってください。

これを使うことで、ユーザーはアイテムを長押ししてListViewのスクロール方向に移動することができ、新しい場所にドロップすることができます。
 

アイテムを掴んで移動することができる

使い方はまず、ReorderableListViewにListTileなど、子widgetのリストを渡します。
 

childrenにListTileのリストを渡す

次に、onReorderメソッドを実装します。

onReorderメソッドはユーザーがリストを並べ替えるときに呼び出されるコールバック関数です。

onReorderを使用して、ReorderableListViewの元データのリストを更新するなどしてください。
 

リスト更新時に呼ばれるコールバック onReorder
元リストの更新などを実施する

また、子widgetはそれぞれ固有のkeyを持っているので、ReorderableListViewはそれぞれの子widgetを識別できるようになっています。
 

もしリストの上部に表示したい内容があれば、headerプロパティを使ってください。
 

headerにText widgetを指定すれば、
リストの上部にテキストを表示できる

まとめ

Widget of the Weekの#42 ReorderableListViewの日本語翻訳版でした。

ReorderableListViewを使うことでユーザーは直感的にリストの順番を入れ替えることができるようになります。

■ 次の記事はこちら
#43 – AnimatedSwitcher

■Widget of the Week まとめ
Widget of the Week 一覧