[Flutter]リストビュー(ListView)の要素にスワイプの処理を追加するには？

Flutter

2021.11.01

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

リストビューの要素にスワイプした時の処理を追加する方法を紹介します。

方法

リストビューの要素にスワイプの処理を追加するには、「Dismissible」ウェジェットを使います。

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

この時、引数「key」の設定もします。

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

次に、引数「background」にスワイプした時に左右に表示されるウェジェットを指定します。

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

最後に、引数「onDismissed」にスワイプした時の処理を指定します。

ListView.builder(
  itemCount: /*count*/,
  itemBuilder: (context, index) {
    return Dismissible(
      key: UniqueKey(),
      child: /*Item*/,
      background: /*Background Widget*/,
      onDismissed : (direction){/*Swipe*/},
    );
  },
),

これでリストビューの要素にスワイプの処理を追加することが出来ます。

以下は、使用例です。

  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,
            ),
          );
        },
      ),
    );
  }