【Flutter x Supabase】 ログアウトやり方＋おまけつき

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

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

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

１、ログアウトしてもいいか確認する
２、ログアウトする
３、ログイン画面に遷移をする

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

ログアウトしてもいいか確認する

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

 void openLogOutDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return CupertinoAlertDialog(
          title: Text('ログアウト'),
          content: Text('ログアウトしますか?'),
          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: () {
                logout();
                Navigator.pop(context);
              },
            ),
          ],
        );
      },
    );
  }

  void logout() {
   // ログアウトの処理を書く
  }
 

ログアウトする

ログアウトする処理はシンプルに記載をすることができます。

final supabase = Supabase.instance.client;

Future<void> logout() async {
  await supabase.auth.signOut();
}

ログイン画面に遷移をする

今回は、ログアウトした後にログイン画面に遷移する処理を記載してみました。
また、pushだと前の画面に戻れてしまうため、pushReplacementを使用します。

Navigator.pushReplacement(
  context,
  MaterialPageRoute( 
    builder: (context) => LoginPage(),
  ),
);

ソースコード

final supabase = Supabase.instance.client;

  void openLogOutDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return CupertinoAlertDialog(
          title: Text('ログアウト'),
          content: Text('ログアウトしますか?'),
          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: () {
                logout();
                Navigator.pop(context);
              },
            ),
          ],
        );
      },
    );
  }

  Future<void> logout() async {
    await supabase.auth.signOut();
    await Navigator.pushReplacement(
      context,
      MaterialPageRoute( 
        builder: (context) => LoginPage(),
      ),
    );
  }

最後に

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

ちょっとした宣伝

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