【Flutter x Supabase】 データの削除するやり方＋おまけつき

![スクリーンショット 2023-11-30 17.02.37（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/76a7d019-9834-ce37-e123-6b4374500921.png)


:::note info
この記事は、<b>株式会社ゆめみの23卒 Advent Calendar 2023</b>のアドベントカレンダーになります！！
色々な種類の記事が投稿されるので、お楽しみに🤗
:::

https://qiita.com/advent-calendar/2023/yumemi-23-graduation

こんにちは。いせりゅーです。今回は、Flutter x Supabaseでデータの削除するやり方に加えて、必要そうな記載を書いてみました。(あくまでも一例です)

:::note warn
Supabaseを学習し始めてからまもないため、間違えた実装を記載するかも知れません。その場合はコメントなどで教えていただけると幸いです🙇
:::


１、削除してもいいかを確認する
２、データを削除する
３、適切な画面に移動する。

こんな感じで進めていきます〜〜！！

# 削除してもいいかを確認する
- 削除の確認についてはいろいろやり方があるかも知れませんが、今回はダイアログを出すことにしました。

```dart
  void openDeleteDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return CupertinoAlertDialog(
          title: Text('投稿の削除'),
          content: Text('この投稿を削除しますか？\n一度削除してしまうと復元できません'),
          actions: <Widget>[
            CupertinoDialogAction(
              child: Text(
                'キャンセル',
                style: TextStyle(color: Colors.blueAccent),
              ),
              isDestructiveAction: true,
              onPressed: () => Navigator.pop(context),
            ),
            CupertinoDialogAction(
              child: Text(
                '削除する',
                style: TextStyle(color: Colors.red),
              ),
              onPressed: () {
                delete();
                //このダイアログを閉じる
                Navigator.pop(context);
              },
            ),
          ],
        );
      },
    );
  }

  void delete(){
    //データを削除する処理を書く
  }

```

# データを削除する

データの削除は以下の通りで削除することができます。事前に削除する`id`を取得する必要があります。


```dart
Future<void> delete(String id) async {
  final supabase = Supabase.instance.client;
  await supabase.from('posts').delete().eq('id', id);
}
```

# 適切な画面に移動する。
削除した後は実装方法でそれぞれあると思いますが、今回は、
１、投稿詳細画面で削除を実行　
２、削除する　
３、投稿一覧画面に画面を戻る

という実装で進めていこうと思っています。

投稿一覧画面に画面を戻るという実装は１行でできますね。

```dart
Navigator.pop(context);
```

# ソースコード

```dart
  void openDeleteDialog(String id) {
    showDialog(
      context: context,
      builder: (context) {
        return CupertinoAlertDialog(
          title: Text('投稿の削除'),
          content: Text('この投稿を削除しますか？\n一度削除してしまうと復元できません'),
          actions: <Widget>[
            CupertinoDialogAction(
              child: Text(
                'キャンセル',
                style: TextStyle(color: Colors.blueAccent),
              ),
              isDestructiveAction: true,
              onPressed: () => Navigator.pop(context),
            ),
            CupertinoDialogAction(
              child: Text(
                '削除する',
                style: TextStyle(color: Colors.red),
              ),
              onPressed: () {
                delete(id);
                Navigator.pop(context);
              },
            ),
          ],
        );
      },
    );
  }

  Future<void> delete(String id) async {
    final supabase = Supabase.instance.client;
    await supabase.from('posts').delete().eq('id', id);
    Navigator.pop(context);
  }

```


# 最後に

自分もまだまだ学習中ですが、Supabaseのいいところが毎日見つかってきてとてもいいですね。個人的にはこれからの発展に期待したいですね😁


# ちょっとした宣伝

株式会社ゆめみの23卒のメンバーでアドベントカレンダーを作成しています。
新卒のフレッシュな記事がたくさん投稿予定なので、少しでも興味があれば購読いただけると幸いです！！


https://qiita.com/advent-calendar/2023/yumemi-23-graduation



<img width="1240" height="112" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/6d8a7098-9aef-a19a-54fe-83a2d493e033.png" alt="YUMEMI New Grad Advent Calendar 2023">