[Flutter]Card(カード)をスワイプ(swipe)で削除(remove)する(dismissible)には？

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

Cardをスワイプで削除する方法を紹介します。

方法
使用例

方法

Cardをスワイプで削除するには、Dismissibleウェジェットを使います。

まず、CardをDismissibleでラップします。

次に、Dismissibleの引数「key」にキーを指定します。

そして、onDismissedに削除した時の処理を指定します。

Dismissible(
  key: /*キー*/,
  onDismissed: (direction) {
    /*削除した時の処理*/
  },
  child: Card(),
);

onDismissedの処理で配列やデータの削除をすれば、Cardに関連する情報を操作することもできます。

これでCardをスワイプで削除することが出来ます。

使用例

以下は、使用例です。

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final items = List<String>.generate(10, (i) => 'Item ${i + 1}');
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ListView.builder(
          itemBuilder: (context, index) {
            final item = items[index];
            return Dismissible(
              key: Key(item),
              onDismissed: (direction) {
                setState(() {
                  items.removeAt(index);
                });
              },
              child: Card(
                child: ListTile(
                  title: Text(item),
                ),
              ),
            );
          },
          itemCount: items.length,
        ),
      ),
    );
  }
}