【スワイプ削除】Dismissibleでチームを左スワイプ削除できるようにする | LINE風チームタスク管理アプリを作りながら、ログイン・データベース・権限管理を学ぶ | Flutterアプリケーション開発概論

今日のゴール

チームカードを左へスワイプすると、赤い削除背景が出て、チームを削除できるようにします。

開発チーム  ← 左にスワイプ
↓
削除
↓
一覧から消える

削除対象は、Firestoreのここです。

teams/{teamId}

単語	一言説明
`Dismissible`	スワイプで項目を消せるWidget
`direction`	スワイプできる方向
`endToStart`	右から左へスワイプする方向
`confirmDismiss`	本当に削除してよいか確認する処理
`onDismissed`	スワイプ後に実行される処理
`delete()`	Firestoreのデータを削除する命令
`Key`	一覧の1件1件を区別するための印

npmや環境変数はこのページで必要？

このページでは、npmは使いません。

環境変数も設定しません。

必要なのは、すでに使っているFirestoreです。

import 'package:cloud_firestore/cloud_firestore.dart';

このページでやることは、TeamCard を Dismissible で包むことです。

Step 1：main.dartを開く

次のファイルを開きます。

lib/main.dart

ターミナルから開く場合は、次を実行します。

code lib/main.dart

Step 4：チーム削除処理を作る

まず、_TeamListPageState の中に、次の関数を追加します。

Future<void> deleteTeam(String teamId) async {
  await FirebaseFirestore.instance.collection('teams').doc(teamId).delete();
}

これは、Firestoreの teams/{teamId} を削除する処理です。

teamId は、削除したいチームのIDです。

Step 5：削除確認ダイアログを作る

いきなり削除すると危ないので、確認画面を出します。

_TeamListPageState の中に、次の関数を追加します。

Future<bool> confirmDeleteTeam(String teamName) async {
  final result = await showDialog<bool>(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: const Text('チームを削除しますか？'),
        content: Text('「$teamName」を削除します。'),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(false),
            child: const Text('キャンセル'),
          ),
          FilledButton(
            onPressed: () => Navigator.of(context).pop(true),
            style: FilledButton.styleFrom(
              backgroundColor: AppColors.danger,
            ),
            child: const Text('削除する'),
          ),
        ],
      );
    },
  );

  return result == true;
}

showDialog は、確認用の小さな画面を出す命令です。

true が返ったら削除します。

false なら削除しません。

Step 6：TeamCardをDismissibleで包む

ListView.separated の中で、次の部分を探します。

return TeamCard(
  name: name,
  onTap: () {
    // 次のページでタスク一覧画面へ移動します
  },
);

これを、次のコードに置き換えます。

return Dismissible(
  key: ValueKey(doc.id),
  direction: DismissDirection.endToStart,
  background: Container(
    alignment: Alignment.centerRight,
    padding: const EdgeInsets.only(right: 20),
    decoration: BoxDecoration(
      color: AppColors.danger,
      borderRadius: BorderRadius.circular(14),
    ),
    child: const Icon(
      Icons.delete,
      color: Colors.white,
    ),
  ),
  confirmDismiss: (_) async {
    return confirmDeleteTeam(name);
  },
  onDismissed: (_) async {
    await deleteTeam(doc.id);
  },
  child: TeamCard(
    name: name,
    onTap: () {
      // 次のページでタスク一覧画面へ移動します
    },
  ),
);

これで、チームを左スワイプできるようになります。

Step 9：赤い削除背景を作る

この部分です。

background: Container(
  alignment: Alignment.centerRight,
  padding: const EdgeInsets.only(right: 20),
  decoration: BoxDecoration(
    color: AppColors.danger,
    borderRadius: BorderRadius.circular(14),
  ),
  child: const Icon(
    Icons.delete,
    color: Colors.white,
  ),
),

スワイプしたときに、赤い背景と削除アイコンが出ます。

alignment: Alignment.centerRight にすることで、右側に削除アイコンを表示します。

Step 10：削除前に確認する

この部分です。

confirmDismiss: (_) async {
  return confirmDeleteTeam(name);
},

confirmDismiss は、スワイプ後に本当に削除してよいか確認する場所です。

ここで true が返ると、削除が進みます。

false が返ると、元に戻ります。

左スワイプ
↓
確認画面
↓
削除する → true
キャンセル → false

Step 11：Firestoreから削除する

この部分です。

onDismissed: (_) async {
  await deleteTeam(doc.id);
},

onDismissed は、スワイプ削除が確定したあとに動きます。

ここで、Firestoreのチームを削除します。

await FirebaseFirestore.instance.collection('teams').doc(teamId).delete();

Step 12：保存する

main.dart を保存します。

Macの場合：

command + S

Windowsの場合：

Ctrl + S

Step 13：実行する

ターミナルで実行します。

flutter run

すでに起動している場合は、ターミナルで r を押します。

動きがおかしい場合は、R でホットリスタートします。

注意：membersやtasksはどうなる？

今回のコードでは、teams/{teamId} だけを削除します。

ただし、Firestoreでは、親ドキュメントを削除しても、サブコレクションが自動で完全削除されるとは限りません。

つまり、次のデータが残る場合があります。

teams/{teamId}/members
teams/{teamId}/tasks

学習段階では、まず teams/{teamId} を削除できればOKです。

本番アプリでは、Cloud Functionsや管理用処理で、関連する members や tasks も整理する設計にします。

よくあるエラーと直し方

エラー	原因	直し方
`Dismissible` が使えない	Materialのimport不足	`import 'package:flutter/material.dart';` を確認
`doc.id` が使えない	`doc` の場所が違う	`final doc = teams[index];` の下で使う
スワイプできない	`Dismissible` で包んでいない	`TeamCard` を `Dismissible` で包む
右スワイプでも消える	direction未指定	`DismissDirection.endToStart` を指定
削除後にエラー	Firestore Rulesで拒否	開発用Rulesを確認
削除後に復活する	Firestore削除に失敗している	`deleteTeam(doc.id)` を確認
確認画面が出ない	`confirmDismiss` がない	`confirmDismiss` を追加

`permission-denied` が出たとき

開発中だけ、Firestore Rulesを次のようにして確認できます。

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

これは学習用です。

本番公開では使わないでください。

本番では、owner や admin だけがチームを削除できるようにします。

TeamCardだけ消えてFirestoreに残る場合

confirmDismiss は動いているが、Firestore削除が失敗している可能性があります。

この部分を確認してください。

onDismissed: (_) async {
  await deleteTeam(doc.id);
},

そして、deleteTeam() が次のようになっているか確認します。

Future<void> deleteTeam(String teamId) async {
  await FirebaseFirestore.instance.collection('teams').doc(teamId).delete();
}

1. 削除処理を追加

Future<void> deleteTeam(String teamId) async {
  await FirebaseFirestore.instance.collection('teams').doc(teamId).delete();
}

2. 削除確認を追加

Future<bool> confirmDeleteTeam(String teamName) async {
  final result = await showDialog<bool>(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: const Text('チームを削除しますか？'),
        content: Text('「$teamName」を削除します。'),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(false),
            child: const Text('キャンセル'),
          ),
          FilledButton(
            onPressed: () => Navigator.of(context).pop(true),
            style: FilledButton.styleFrom(
              backgroundColor: AppColors.danger,
            ),
            child: const Text('削除する'),
          ),
        ],
      );
    },
  );

  return result == true;
}

3. TeamCardをDismissibleで包む

return Dismissible(
  key: ValueKey(doc.id),
  direction: DismissDirection.endToStart,
  background: Container(
    alignment: Alignment.centerRight,
    padding: const EdgeInsets.only(right: 20),
    decoration: BoxDecoration(
      color: AppColors.danger,
      borderRadius: BorderRadius.circular(14),
    ),
    child: const Icon(
      Icons.delete,
      color: Colors.white,
    ),
  ),
  confirmDismiss: (_) async {
    return confirmDeleteTeam(name);
  },
  onDismissed: (_) async {
    await deleteTeam(doc.id);
  },
  child: TeamCard(
    name: name,
    onTap: () {
      // 次のページでタスク一覧画面へ移動します
    },
  ),
);

4. 保存して実行

flutter run

チェックリスト

□ main.dartを開いた
□ TeamListPageを探した
□ deleteTeam()を作った
□ confirmDeleteTeam()を作った
□ TeamCardをDismissibleで包んだ
□ keyにValueKey(doc.id)を指定した
□ directionにendToStartを指定した
□ 赤い削除背景を作った
□ confirmDismissを追加した
□ onDismissedでdeleteTeam(doc.id)を呼んだ
□ 保存した
□ flutter runで起動した
□ 左スワイプで削除確認が出た
□ 削除後に一覧から消えた

Q2. `DismissDirection.endToStart` はどの方向ですか？

Q3. `confirmDismiss` は何のために使いますか？

回答

本当に削除してよいか、削除前に確認するために使います。

true を返すと削除、false を返すとキャンセルです。

回答

必要ありません。

このページでは、Flutterの Dismissible とFirestoreの delete() を使うだけです。

このページのまとめ

Dismissible を使うと、一覧項目をスワイプ削除できる。
direction: DismissDirection.endToStart で左スワイプに限定できる。
background で赤い削除背景を作る。
confirmDismiss で削除前に確認できる。
onDismissed でFirestoreから削除する。
今回は teams/{teamId} を削除する。
本番では owner や admin だけが削除できるようにする。
このページではnpmや環境変数は不要。

次のページでやること

次のページでは、チームをタップしてタスク一覧画面へ移動します。

teamId と teamName を渡して、そのチーム専用のタスク一覧を表示する準備をします。

単語	一言説明
`Dismissible`	スワイプで項目を消せるWidget
`direction`	スワイプできる方向
`endToStart`	右から左へスワイプする方向
`confirmDismiss`	本当に削除してよいか確認する処理
`onDismissed`	スワイプ後に実行される処理
`delete()`	Firestoreのデータを削除する命令
`Key`	一覧の1件1件を区別するための印

単語

一言説明

Dismissible

スワイプで項目を消せるWidget

direction

スワイプできる方向

endToStart

右から左へスワイプする方向

confirmDismiss

本当に削除してよいか確認する処理

onDismissed

スワイプ後に実行される処理

delete()

Firestoreのデータを削除する命令

Key

一覧の1件1件を区別するための印

Future<bool> confirmDeleteTeam(String teamName) async { final result = await showDialog<bool>( context: context, builder: (context) { return AlertDialog( title: const Text('チームを削除しますか？'), content: Text('「$teamName」を削除します。'), actions: [ TextButton( onPressed: () => Navigator.of(context).pop(false), child: const Text('キャンセル'), ), FilledButton( onPressed: () => Navigator.of(context).pop(true), style: FilledButton.styleFrom( backgroundColor: AppColors.danger, ), child: const Text('削除する'), ), ], ); }, ); return result == true; }

return Dismissible( key: ValueKey(doc.id), direction: DismissDirection.endToStart, background: Container( alignment: Alignment.centerRight, padding: const EdgeInsets.only(right: 20), decoration: BoxDecoration( color: AppColors.danger, borderRadius: BorderRadius.circular(14), ), child: const Icon( Icons.delete, color: Colors.white, ), ), confirmDismiss: (_) async { return confirmDeleteTeam(name); }, onDismissed: (_) async { await deleteTeam(doc.id); }, child: TeamCard( name: name, onTap: () { // 次のページでタスク一覧画面へ移動します }, ), );

background: Container( alignment: Alignment.centerRight, padding: const EdgeInsets.only(right: 20), decoration: BoxDecoration( color: AppColors.danger, borderRadius: BorderRadius.circular(14), ), child: const Icon( Icons.delete, color: Colors.white, ), ),

エラー

原因

直し方

Dismissible が使えない

Materialのimport不足

import 'package:flutter/material.dart'; を確認

doc.id が使えない

doc の場所が違う

final doc = teams[index]; の下で使う

スワイプできない

Dismissible で包んでいない

TeamCard を Dismissible で包む

右スワイプでも消える

direction未指定

DismissDirection.endToStart を指定

削除後にエラー

Firestore Rulesで拒否

開発用Rulesを確認

削除後に復活する

Firestore削除に失敗している

deleteTeam(doc.id) を確認

確認画面が出ない

confirmDismiss がない

confirmDismiss を追加

□ main.dartを開いた □ TeamListPageを探した □ deleteTeam()を作った □ confirmDeleteTeam()を作った □ TeamCardをDismissibleで包んだ □ keyにValueKey(doc.id)を指定した □ directionにendToStartを指定した □ 赤い削除背景を作った □ confirmDismissを追加した □ onDismissedでdeleteTeam(doc.id)を呼んだ □ 保存した □ flutter runで起動した □ 左スワイプで削除確認が出た □ 削除後に一覧から消えた