動画
要約
- 左右にスワイプして項目を削除するUIパターンはDismissibleを使って実現できる
- 削除時にはonDismissedというコールバックが実行されるので、onDismissedの中でStatefulWidget.setState等を実行できる。
内容
左右にスワイプすることでリストの項目を削除する動きはよくあるUIパターンの１つです（通知の既読、Gmailのアーカイブ等）。
FlutterではDismissibleでこのUIパターンを実装できます。
使い方は簡単です。
Dismissibleに、child、background、keyを指定するだけです。
backgroundはスワイプした際に見える背景のことです。
それだけです。
後はFlutterがスワイプジェスチャーを検知し、childをアニメートして削除してくれます。
StatefulWidgetの中でListViewを使っている場合、次のように実装できます。
onDismissedコールバックを使ってsetStateを呼び出し、listからitemを削除することができます。
また、secondaryBackgroundを使うとユーザーは左右両方向にスワイプすることができるようになります。
そのほかにも、directionプロパティを使って、垂直方向へのスワイプも実現できます。
まとめ
Widget of the Weekの#28 Dismissibleの日本語翻訳版でした。
Dismissibleを使うことで、開発者はユーザーにとても直感的なUIパターンを提供することができます。
イベントの検知や複雑なレンダリングはFlutterがやってくれるので、開発者は気にする必要がありません。とてもありがたいですね！
■ 次の記事はこちら
#29 – SizedBox
■Widget of the Week まとめ
Widget of the Week 一覧