【Flutter】Dismissibleでスワイプアクションを実装

Dismissible(
  key: Key(item),
  child: ListTile(title: Text('$item')),
);

Dismissible(
  key: Key(item),
  child: ListTile(title: Text('$item')),
);

Dismissible(
  key: Key(item),
  onDismissed: (direction) {
    setState(() {
      items.removeAt(index);
    });
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('$item dismissed')));
  },
  child: ListTile(title: Text('$item')),
);

Dismissible(
  key: Key(item),
  background: Container(color: Colors.red),
  child: ListTile(title: Text('$item')),
);

Dismissible(
  key: UniqueKey(),
  direction: DismissDirection.endToStart,
  onDismissed: (direction) { /*...*/ },
  background: /*...*/,
  child: /*...*/,
)

Dismissible(
  key: UniqueKey(),
  confirmDismiss: (direction) async {
    return await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text("削除の確認"),
          content: const Text("このアイテムを削除してもよろしいですか？"),
          actions: <Widget>[
            FlatButton(
              onPressed: () => Navigator.of(context).pop(true),
              child: const Text("削除")
            ),
            FlatButton(
              onPressed: () => Navigator.of(context).pop(false),
              child: const Text("キャンセル"),
            ),
          ],
        );
      },
    );
  },
  onDismissed: (direction) { /*...*/ },
  background: /*...*/,
  child: /*...*/,
)

Dismissible(
  key: UniqueKey(),
  movementDuration: Duration(milliseconds: 200),
  onDismissed: (direction) { /*...*/ },
  background: /*...*/,
  child: /*...*/,
)

Dismissible(
  key: Key(item),
  onDismissed: (direction) {
    setState(() {
      items.removeAt(index);
    });

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('$item dismissed')),
    );
  },
  child: ListTile(title: Text('$item')),
);

Dismissible(
  key: Key(item),
  background: Container(
    alignment: Alignment.centerRight,
    color: Colors.red,
    child: IconButton(
      icon: Icon(Icons.edit),
      onPressed: () {
        // 編集処理を実行
      },
    ),
  ),
  child: ListTile(title: Text('$item')),
);

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dismissible Sample'),
        ),
        body: TodoList(),
      ),
    );
  }
}
class TodoList extends StatefulWidget {
  @override
  _TodoListState createState() => _TodoListState();
}
class _TodoListState extends State {
  List _todoItems = [
    'Task 1',
    'Task 2',
    'Task 3',
    'Task 4',
    'Task 5',
  ];
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _todoItems.length,
      itemBuilder: (context, index) {
        String? removedItem;
        return Dismissible(
          key: UniqueKey(),
          onDismissed: (direction) {
            setState(() {
              removedItem = _todoItems.removeAt(index);
            });
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('Task removed!'),
                action: SnackBarAction(
                    label: 'UNDO',
                    onPressed: () {
                      if (removedItem == null) {
                        return;
                      }
                      setState(() {
                        _todoItems.insert(index, removedItem!);
                      });
                      removedItem = null;
                    }),
              ),
            );
          },
          background: Container(
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.only(left: 20.0),
            color: Colors.red,
            child: Icon(Icons.delete, color: Colors.white),
          ),
          secondaryBackground: Container(
            alignment: Alignment.centerRight,
            padding: EdgeInsets.only(right: 20.0),
            color: Colors.red,
            child: Icon(Icons.delete, color: Colors.white),
          ),
          child: ListTile(
            title: Text(_todoItems[index]),
          ),
          direction: DismissDirection.horizontal,
          dismissThresholds: {
            DismissDirection.startToEnd: 0.2,
            DismissDirection.endToStart: 0.2,
          },
          movementDuration: Duration(milliseconds: 200),
        );
      },
    );
  }
}