[Flutter]リストビュー(ListView)の要素をスワイプで削除するには？

Flutter

2021.10.30

どうも、ちょげ(@chogetarou)です。

リストビューの要素をスワイプで削除する方法を紹介します。

方法
まとめ

方法

リストビューの要素をスワイプで削除するには、Dismissibleウェジェットを使います。

まず、リストビューの要素をDismissibleの引数「child」に指定します。

ListView.builder(
  itemCount: /*count*/,
  itemBuilder: (context, index) {
    return Dismissible(
      key: UniqueKey(), //そのまま使えばOK
      child: /*要素*/,
   );
  },
),

次に、引数「background」に「Container」ウェジェットを指定します。

この時、スワイプした際の色を、「Container」の引数「color」で設定します。

ListView.builder(
  itemCount: /*count*/,
  itemBuilder: (context, index) {
    return Dismissible(
      key: UniqueKey(),
      child: /*Item*/,
      background: Container(
        color: /*Swipe Color*/,
      ),
    );
  },
),

最後に、引数「onDismissed」に削除した時の処理を指定します。

ListView.builder(
  itemCount: /*count*/,
  itemBuilder: (context, index) {
    return Dismissible(
      key: UniqueKey(),
      child: /*Item*/,
      background: Container(
        color: /*Swipe Color*/,
      ),
       onDismissed : (direction) {/*削除処理*/}
    );
  },
),

これでリストビューの要素をスワイプで削除できるようになります。

以下は、使用例です。

  var _list = <String>[
    'One',
    'Two',
    'Three',
    'Four',
    'Five',
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: _list.length,
        itemBuilder: (context, index) {
          return Dismissible(
            key: UniqueKey(),
            child: Card(
              child: ListTile(
                title: Text(_list[index]),
              ),
            ),
            onDismissed: (direction) {
              setState(() {
                _list.removeAt(index);
              });
            },
            background: Container(
              color: Colors.red,
            ),
          );
        },
      ),
    );
  }