【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part102 Interaction model widgets

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part102 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part101 Interaction model widgets

引き続き、Interaction model widgetsについて学びます。

Interaction model widgets

Dismissibleウィジェット

confirmDismissプロパティ

confirmDismissプロパティはリストのアイテムをスワイプした際に呼び出されるコールバック関数を指定します。
この関数でtrueを返却するとリストからアイテムを削除する処理が進みます。
順番としてはconfirmDismissonDismissedとなります。

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

void main() {
  // runApp(new MaterialApp(home: new MyApp()));
  runApp(new MaterialApp(home: new SamplePage()));
}

class SamplePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SamplePageState();
  }
}

class _SamplePageState extends State<SamplePage> {
  List<String> _items = ['いち', 'に', 'さん'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('テスト中!')),
        body: ListView.builder(
          itemCount: _items.length,
          itemBuilder: (context, index) {
            return Dismissible(
              key: UniqueKey(),
              background: Container(color: Colors.amber),
              // スワイプして削除されたら呼び出される関数を定義します。
              onDismissed: (DismissDirection direction) {
                setState(() {
                  _items.removeAt(index);
                });
              },
              confirmDismiss: (DismissDirection direction) async {
                return deleteOK();
              },
              child: ListTile(title: Text('${_items[index]}')),
            );
          },
        ),
      ),
    );
  }

  /// 削除確認メソッド
  Future<bool> deleteOK() async {
    bool result = false;
    await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("確認"),
          content: Text("削除します。よろしいですか?"),
          actions: [
            ElevatedButton(
                onPressed: () async {
                  Navigator.of(context).pop(true);
                  result = true;
                },
                child: const Text("削除")),
            ElevatedButton(
              onPressed: () => Navigator.of(context).pop(false),
              child: const Text("キャンセル"),
            ),
          ],
        );
      },
    );

    return result;
  }
}

確認ダイアログでキャンセルをタップすると削除されません。
削除をタップするとonDismissedで設定したコールバック関数が呼び出されます。

最後に

スマートフォンのアプリケーションっぽくなってきましたね。

今日はここまで!

参考

Flutter Dismissible Widjet スワイプでのリスト項目の削除方法 (marketech.tokyo)