flutterはiOSネイティブのリスト項目のスワイプ削除ライブラリを模倣する flutter_swipe_action_cell

flutter_swipe_action_cell

iOSネイティブのエフェクトを提供するリストサイドスライダーライブラリ

例 1: 最も単純な例 - 削除

ヒント：ListViewのitemBuilderのreturnの中に次のように記述します。

 SwipeActionCell(
 ///このキーは必須である
 key: ObjectKey(list[index]),
 actions: <SwipeAction>[
 SwipeAction(
 title: "delete",
 onTap: (CompletionHandler handler) async {
 list.removeAt(index);
 setState(() {});
 },
 color: Colors.red),
 ],
 child: Padding(
 padding: const EdgeInsets.all(8.0),
 child: Text("this is index of ${list[index]}",
 style: TextStyle(fontSize: 40)),
 ),
 );
 

例2：最初のアクションは、満杯になったときに実行されます。

SwipeActionCell(
 ///このキーには
 key: ObjectKey(list[index]),
 ///パラメータ名はiOSネイティブと同じ
 performsFirstActionWithFullSwipe: true,
 actions: <SwipeAction>[
 SwipeAction(
 title: "delete",
 onTap: (CompletionHandler handler) async {
 list.removeAt(index);
 setState(() {});
 },
 color: Colors.red),
 ],
 child: Padding(
 padding: const EdgeInsets.all(8.0),
 child: Text("this is index of ${list[index]}",
 style: TextStyle(fontSize: 40)),
 ),
 );

例3：付随するアニメーションの削除

SwipeActionCell(
 ///このキーは必須である
 key: ObjectKey(list[index]),
 performsFirstActionWithFullSwipe: true,
 actions: <SwipeAction>[
 SwipeAction(
 title: "delete",
 onTap: (CompletionHandler handler) async {
 
 /// await handler(true) : 行が削除されることを意味する
 ///setState関数を呼び出してデータとUIを同期させるのは、削除アニメーションが終わってからにする。
 await handler(true);
 list.removeAt(index);
 setState(() {});
 },
 color: Colors.red),
 ],
 child: Padding(
 padding: const EdgeInsets.all(8.0),
 child: Text("this is index of ${list[index]}",
 style: TextStyle(fontSize: 40)),
 ),
 );
 

例4：複数のアクション

SwipeActionCell(
 ///このキーは必須である
 key: ObjectKey(list[index]),
 ///パラメータの名前と意味は、iOSネイティブのものと同じである。
 performsFirstActionWithFullSwipe: true,
 actions: <SwipeAction>[
 SwipeAction(
 title: "delete",
 onTap: (CompletionHandler handler) async {
 await handler(true);
 list.removeAt(index);
 setState(() {});
 },
 color: Colors.red),
 SwipeAction(
 widthSpace: 120,
 title: "popAlert",
 onTap: (CompletionHandler handler) async {
 ///false つまり、行を削除せず、デフォルトではアクションボタンを閉じる。
 handler(false);
 showCupertinoDialog(
 context: context,
 builder: (c) {
 return CupertinoAlertDialog(
 title: Text('ok'),
 actions: <Widget>[
 CupertinoDialogAction(
 child: Text('confirm'),
 isDestructiveAction: true,
 onPressed: () {
 Navigator.pop(context);
 },
 ),
 ],
 );
 });
 },
 color: Colors.orange),
 ],
 child: Padding(
 padding: const EdgeInsets.all(8.0),
 child: Text(
 "this is index of ${list[index]}",
 style: TextStyle(fontSize: 40)),
 ),
 );
 

CompletionHandlerについて

アクションをクリックした後、どのようにセルを操作するかを表します。もしアニメーションを必要としないのであれば、ハンドラを実行する代わりに、データを更新し、setState

アニメーションをしたいのなら。

hander(true):この行が削除されることを意味します（UI上ではこの行は表示されませんが、データとsetStateを更新する必要があります）。

await handler(true):削除アニメーションの終了を待つことを意味します。この行の後にsetStateを実行しなければ、アニメーションは表示されません。

handler(false) ：クリックされたときに行を削除するアクションは内部的には行われません。

await handler(false): 上記とは対照的に、彼はクローズアニメーションの終了を待つだけです。