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

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

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

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

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

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

削除してもいいかを確認する

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

  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を取得する必要があります。

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

適切な画面に移動する。

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

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

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

Navigator.pop(context);

ソースコード

  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卒のメンバーでアドベントカレンダーを作成しています。
新卒のフレッシュな記事がたくさん投稿予定なので、少しでも興味があれば購読いただけると幸いです！！