【flutter】スワイプでリストを削除する方法~Dismissible()を使う~

こんにちは!本記事では、左の動画のように、スワイプすると選択したリストが削除されるように実装する手順を説明します。

目次

Dismissibleウィジェットの埋め込み方例

使い方としては、こんな感じです。oneListというリストの中に、文章が格納されていることを想定しています。

ListView.builder(
  itemCount: oneList.length
  itemBuilder: (context, index){
    return Dismissible(
    onDismissed: (direction){
      setState((){oneList.removeAt(index);});
      },
    key: UniqueKey(),
      child: ListTile(
      title: Text(oneList[index]),
      ),
    );
  },
)

onDismissed・・スワイプされた時のアクション(上記例文では、スワイプされた行をリストから消すよう指示しています)

key・・・削除する時に必要なもの。このキーが他と被ったりするとアニメーションがおかしくなったりするため、個別のものを選ぶ必要があります。基本的にはUniquieKey()で問題ないです。

消す際の表示をアレンジしたいとき

スワイプする際に出てくる赤いエリアをアレンジしたいときは、Dismissible()内のbackgroundを変更します。先ほどのコードに追記するとこんな感じ。

ListView.builder(
  itemCount: oneList.length
  itemBuilder: (context, index){
    return Dismissible(
    background: Container(
      color: Colors.red,
      child: Icon(Icons.delete, color: Colors.white),
      ),
    onDismissed: (direction){
      setState((){oneList.removeAt(index);});
      },
    key: UniqueKey(),
      child: ListTile(
      title: Text(oneList[index]),
      ),
    );
  },
)

これで、最初に表示した動画のように、スワイプすると赤い画面とゴミ箱のアイコンが表示されるようになります。

関連記事

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる