スワイプでボタンが出る行 Slidable List Item

リストの行を横にずらすと、裏から「アーカイブ」「削除」などのボタンが現れ、押して実行する。

別名: スワイプアクションiOS メール風スワイプ横にずらすとボタンスライダブルSwipe ActionsSlidable
動き: 横にずらす下からボタンが現れる出方が4種類
作り方: パッケージあり標準でも作れますが、pub.dev のパッケージを使うと早いです

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

別タブで大きく開く ↗

どんなもの？

iOS のメールアプリのように、払い切らずにボタンを出して選ばせる形です。

「スワイプで削除」が払った瞬間に実行されるのに対して、こちらは出てきたボタンを押すまで実行されません。

flutter_slidable パッケージの Slidable で行を包み、startActionPane（右へずらす）・endActionPane（左へずらす）に

SlidableAction を並べます。

ボタンの出方は motion で選べ、BehindMotion（裏に隠れている）・DrawerMotion（引き出し）・

ScrollMotion（一緒に流れる）・StretchMotion（伸びる）の4種類があります。デモで1行ずつ見比べられます。

こんなときに

行ごとに2〜3個の操作（アーカイブ・削除・ピン留め）を素早く出したい

避けたい場面

操作が1つだけ（スワイプで削除のほうが速い）

最小コード

Slidable(
  key: ValueKey(mail.id),
  endActionPane: ActionPane(
    motion: const DrawerMotion(), // Behind / Scroll / Stretch
    children: [
      SlidableAction(
        onPressed: (_) => archive(mail),
        backgroundColor: Colors.green,
        icon: Icons.archive_outlined,
        label: 'アーカイブ',
      ),
      SlidableAction(
        onPressed: (_) => delete(mail),
        backgroundColor: Colors.red,
        icon: Icons.delete_outline,
        label: '削除',
      ),
    ],
  ),
  child: ListTile(title: Text(mail.subject)),
)