スワイプで削除 Swipe to Dismiss

リストの行を横にスワイプすると、下から色付きの背景が現れ、そのまま行が消える。

別名: スワイプアクションスワイプ削除横スワイプリーディング/トレーリングスワイプSwipe Actions
動き: 横にスワイプ色付きの背景が見える行が消える
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます（初回は数秒かかります）

別タブで大きく開く ↗

どんなもの？

メールアプリでおなじみの「横に払って削除・アーカイブ」です。

Dismissible で行を囲み、background（右へ払ったとき）と secondaryBackground（左へ払ったとき）を指定します。

key には行ごとに変わらない値を渡すこと（インデックスを使うと消した後に別の行がずれて消えます）。

消した直後に SnackBar で「元に戻す」を出すのがお約束です。

払い切らずにボタンを出したい（iOS のメール風）ときは flutter_slidable パッケージを使います。

こんなときに

一覧から項目を素早く片付けたい（メール・通知・ToDo）

避けたい場面

削除の入口がスワイプだけ（気づかれにくいので、詳細画面などにも削除を置く）
元に戻す手段がない（誤操作しやすい動きなので）

最小コード

Dismissible(
  key: ValueKey(item.id), // インデックスではなく、変わらない値
  background: Container(color: Colors.green),          // 右へ払う
  secondaryBackground: Container(color: Colors.red),   // 左へ払う
  onDismissed: (direction) {
    setState(() => items.remove(item));
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: const Text('削除しました'),
      action: SnackBarAction(label: '元に戻す', onPressed: undo),
    ));
  },
  child: ListTile(title: Text(item.title)),
)