【Flutter】スライドアップパネル(flutter_slidable)を実装し、リストの要素を削除する方法について解説

dependencies:
  flutter:
    sdk: flutter
  flutter_slidable: ^3.0.1

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('スライドアクションリストデモ'),
        ),
        body: SlidableListItem(),
      ),
    );
  }
}

class SlidableListItem extends StatefulWidget {
  @override
  _SlidableListItemState createState() => _SlidableListItemState();
}

class _SlidableListItemState extends State<SlidableListItem> {
  List<String> items = List.generate(10, (index) => 'アイテム #$index');

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return Slidable(
          key: ValueKey(items[index]),
          startActionPane: ActionPane(
            motion: const DrawerMotion(),
            children: [
              SlidableAction(
                onPressed: (context) {
                  setState(() {
                    items.removeAt(index);
                  });
                },
                backgroundColor: Color(0xFFFE4A49),
                foregroundColor: Colors.white,
                icon: Icons.delete,
                label: '削除',
              ),
            ],
          ),
          endActionPane: ActionPane(
            motion: const DrawerMotion(),
            children: [
              // ここに他のアクションを追加できます。
            ],
          ),
          child: ListTile(
            title: Text(items[index]),
            subtitle: Text('サブタイトル'),
          ),
        );
      },
    );
  }
}