Dismissible
ウィジェットを使用するとスワイプで削除できる。
Dismissible ウィジェット とは
指定方向にスワイプすると子要素が消えるウィジェット。
サンプルソース
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: TodoList(),
);
}
}
class TodoList extends StatefulWidget {
@override
_TodoListState createState() => _TodoListState();
}
class _TodoListState extends State<TodoList> {
List<String> todoItems = ["Task 1", "Task 2", "Task 3"];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Todo List"),
),
body: ListView.builder(
itemCount: todoItems.length,
itemBuilder: (context, index) {
final todoItem = todoItems[index];
return Dismissible( // ここでDismissibleウィジェットを使用
key: Key(todoItem),
background: Container( // スワイプしたときに後ろに見える背景
color: Colors.red,
alignment: Alignment.centerRight, // text-align: right; と一緒
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
onDismissed: (direction) { // 削除されるときに実行される
// アイテムを削除
setState(() {
todoItems.removeAt(index);
});
// スナックバーを表示
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('$todoItem を削除しました'),
),
);
},
child: ListTile(
title: Text(todoItem),
),
);
},
),
);
}
}
感想
もっと複雑な構造かと思った。
参考
Comments
Let's comment your feelings that are more than good