こんにちは！本記事では、左の動画のように、スワイプすると選択したリストが削除されるように実装する手順を説明します。
目次
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]),
),
);
},
)これで、最初に表示した動画のように、スワイプすると赤い画面とゴミ箱のアイコンが表示されるようになります。
コメント