本エントリではウィジェットをスワイプすることで削除する方法について以下の流れで説明する。
スワイプで削除する機能の実装方法
Flutterではスワイプでウィジェットを削除するためのDismissible
が用意されている。
本エントリではDismissible
を用いる。
指定した方向にドラッグすることで、リストの一覧からアイテムを取り除ける機能を実装するためのウィジェット。
特に近年増えている「リストのアイテムを左スワイプで削除」するためのUIに使用されることが多い。
サンプルアプリ
動作
次のgif画像の様なアプリを作成する。
リスト形式のアイテムを左スワイプするとそのアイテムがリストから削除される。 右スワイプは今回無効にしてある。
作り方
リストアイテムの用意
まず以下のList
を用意する。
ListView.builder()ウィジェットの配置
次にListView.builder()
でスクロールができるリストを作成する。
ListTile
ウィジェットのtitle
にはリストアイテムの文字列を表示する。
このままだと左スワイプでの削除ができないので、Card
ウィジェットをDismissibel
ウィジェットでラップする。
ヒント
ラップする際にIDEを使用している場合は、補完機能を用いると楽。 VSCodeでは
Card
ウィジェットにカーソルを合わせて ⌘ と . の同時押しで「Wrap with Widget」などを選ぶとラップ処理を簡単にできる。
CardウィジェットをDismissibleウィジェットでラップする
key
プロパティは左スワイプされたアイテムをFlutterが認識するために必要。ユニークな値が必要であるため、UniqueKey()
ウィジェットを渡すと楽。
direction
プロパティはスワイプ可能な方向を指定する。デフォルトでは右スワイプも有効であるため、削除スワイプ方向を左に限定する為にDismissDirection.endToStart
を渡す。その他のスワイプ方向の指定は以下リンクを参照。
onDismissed
プロパティにはスワイプした際に実行したいイベントハンドラを渡す。このコールバック関数は引数にDismissDirection
を受け取るので、スワイプ方向によって処理を変えることも可能。(例. LINEのトーク部屋など)
左スワイプした際の背景をつける
このままだと左スワイプした際にリストアイテムの背景が何も表示されないため、ユーザーに削除操作だと伝わりづらい。
そこでスワイプした際に背景としてIcons.delete
(ゴミ箱マーク)と「delete」という文字を表示する。
背景の設定にはbackground
プロパティを設定すれば良い。
まとめ
リストアイテムを左スワイプで削除するUIはDismissible
ウィジェットを使うと簡単に作成できる。
最近のアプリはこのUIを備えていることが多く、ユーザーにとっても自然な動作になりつつあるので、リスト形式の表示がアプリ内に存在する場合は是非取り入れたい。