すらぼうの開発ノート

モバイルアプリエンジニアのメモ

【Flutter】Dismissibleを用いてスワイプでウィジェットを削除する方法

本エントリではウィジェットをスワイプすることで削除する方法について以下の流れで説明する。



スワイプで削除する機能の実装方法

Flutterではスワイプでウィジェットを削除するためのDismissibleが用意されている。 本エントリではDismissibleを用いる。

api.flutter.dev

指定した方向にドラッグすることで、リストの一覧からアイテムを取り除ける機能を実装するためのウィジェット

特に近年増えている「リストのアイテムを左スワイプで削除」するためのUIに使用されることが多い。


サンプルアプリ

動作

次のgif画像の様なアプリを作成する。

sample app

リスト形式のアイテムを左スワイプするとそのアイテムがリストから削除される。 右スワイプは今回無効にしてある。

作り方

リストアイテムの用意

まず以下のListを用意する。

ListView.builder()ウィジェットの配置

次にListView.builder()でスクロールができるリストを作成する。

ListTileウィジェットtitleにはリストアイテムの文字列を表示する。 このままだと左スワイプでの削除ができないので、CardウィジェットDismissibelウィジェットでラップする。

ヒント

ラップする際にIDEを使用している場合は、補完機能を用いると楽。 VSCodeではCardウィジェットにカーソルを合わせて ⌘ と . の同時押しで「Wrap with Widget」などを選ぶとラップ処理を簡単にできる。

wrap shortcut

CardウィジェットをDismissibleウィジェットでラップする

keyプロパティは左スワイプされたアイテムをFlutterが認識するために必要。ユニークな値が必要であるため、UniqueKey()ウィジェットを渡すと楽。

directionプロパティはスワイプ可能な方向を指定する。デフォルトでは右スワイプも有効であるため、削除スワイプ方向を左に限定する為にDismissDirection.endToStartを渡す。その他のスワイプ方向の指定は以下リンクを参照。

api.flutter.dev

onDismissedプロパティにはスワイプした際に実行したいイベントハンドラを渡す。このコールバック関数は引数にDismissDirectionを受け取るので、スワイプ方向によって処理を変えることも可能。(例. LINEのトーク部屋など)

左スワイプした際の背景をつける

このままだと左スワイプした際にリストアイテムの背景が何も表示されないため、ユーザーに削除操作だと伝わりづらい。 そこでスワイプした際に背景としてIcons.delete(ゴミ箱マーク)と「delete」という文字を表示する。

背景の設定にはbackgroundプロパティを設定すれば良い。


まとめ

リストアイテムを左スワイプで削除するUIはDismissibleウィジェットを使うと簡単に作成できる。

最近のアプリはこのUIを備えていることが多く、ユーザーにとっても自然な動作になりつつあるので、リスト形式の表示がアプリ内に存在する場合は是非取り入れたい。