次のチャプターでは TODO の削除ができるように実装していきましょう。
ダイアログの表示
まずは TODO の trailing アイコンをタップしたときにダイアログが表示されるようにしてみましょう。
ダイアログの表示には、showDialog() を利用します。
my_home_page 以下のように変更しましょう。TODO の trailing アイコンをタップしたときに表示したいので、trailing アイコンの onPressed を指定します。
my_home_page.dart
body:ListView.builder(
itemCount: _todoItems.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: ListTile(
title: Text(_todoItems[index]),
trailing: IconButton(
icon: const Icon(Icons.more_vert),
- onPressed: () {},
+ onPressed: () => showDialog(
+ context: context,
+ builder: (BuildContext context) => AlertDialog(
+ title: Text(_todoItems[index]),
+ ),
+ ),
),
),
);
},
),
TODO の右のアイコンをタップするとダイアログが表示されます。
ダイアログにボタンを追加する
次はダイアログにボタンを追加します。AlertDialog にボタンを追加する場合は、actions に指定します。
my_home_page.dart
onPressed: () => showDialog(
context: context,
builder: (BuildContext context) => AlertDialog(
title: Text(_todoItems[index]),
+ actions: [
+ IconButton(
+ icon: Icon(Icons.delete),
+ color: Colors.red,
+ onPressed: () => Navigator.pop(context),
+ ),
+ ],
),
),
これで赤いゴミ箱のアイコンボタンがダイアログに追加されます。
画面遷移で戻るときに使う Navigator.pop(context) はダイアログを閉じるのにも利用します。なのでダイアログのゴミ箱アイコンをタップするとダイアログが閉じます。
次はこのボタンを押したときに削除できるように実装しましょう。
_deleteTodo()
まずは TODO を削除する関数 deleteTodo を作成します。
配列の要素をインデックスを使って削除するには、removeAt() を使います。
my_home_page.dart
class _MyHomePageState extends State<MyHomePage> {
// 略
+ void _deleteTodo(int index) {
+ setState(() {
+ _todoItems.removeAt(index);
+ });
+ }
_deleteTodo() をダイアログで使う
次は先ほど作った _deleteTodo() を使って TODO を削除できるようにしましょう。
以下のように変更します。
my_home_page.dart
onPressed: () => showDialog(
context: context,
builder: (BuildContext context) => AlertDialog(
title: Text(_todoItems[index]),
actions: [
IconButton(
icon: const Icon(Icons.delete),
color: Colors.red,
- onPressed: () => Navigator.pop(context),
+ onPressed: () {
+ _deleteTodo(index);
+ Navigator.pop(context);
+ },
),
],
),
),
TODO をダイアログから削除できるようにできました。
削除前
削除後
次のチャプターでは TODO の要素にアイコンを増やしてみましょう。