【Flutter x Supabase】 データの更新する方法＋おまけつき

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

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

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

１、更新するデータが記入されていないかを確認する
２、データの更新をする
３、SnackBarを出して、その後に画面を戻る

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

更新するデータが記入されていないかを確認する

データの更新において、まずは既存データを取得する処理を記載してみました。

final nameTextController = TextEditingController();
final useNameTextController = TextEditingController();
final selfIntroduceTextController = TextEditingController();
final supabase = Supabase.instance.client;

Future<void> getProfile() async {
  final userId = supabase.auth.currentUser!.id;
  final data = await supabase
      .from('users')
       .select<Map<String, dynamic>>()
       .eq('user_id', userId)
       .single();
  nameTextController.text = data['name'];
  useNameTextController.text = data['user_name'];
  selfIntroduceTextController.text = data['self_introduce'];
}

データの更新をする

今回はユーザーの情報を更新する処理を書きます。
今回は以下のデータになっています

• 名前
• ユーザーネーム（@isekiryu的なもの）
• 自己紹介
• 更新した情報

final nameTextController = TextEditingController();
final useNameTextController = TextEditingController();
final selfIntroduceTextController = TextEditingController();
final supabase = Supabase.instance.client;

Future<void> update() async {
  final user = supabase.auth.currentUser;
  final updates = {
    'name': nameTextController.text,
    'user_name': useNameTextController.text,
    'self_introduce': selfIntroduceTextController.text,
    'updated_at': DateTime.now().toIso8601String(),
  };

  try {
      await supabase.from('users').update(updates).match({'user_id': user!.id});
    } on PostgrestException catch (error) {
      print(error);
    }
  }
}

SnackBarを出して、その後に画面を戻る

データの更新が完了したら、編集画面の前に戻りたいので、popをします。またちゃんと更新できたことをユーザーに伝えるためにSnackBarを表示することにしました。

final snackBar = SnackBar(content: Text('データの更新が完了しました'));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
// しっかりとSnackBarを見せつけてから画面に戻る
await Future.delayed(Duration(seconds: 2));
Navigator.pop(context);

ソースコード

final nameTextController = TextEditingController();
final useNameTextController = TextEditingController();
final selfIntroduceTextController = TextEditingController();
final supabase = Supabase.instance.client;

Future<void> getProfile() async {
    final userId = supabase.auth.currentUser!.id;
    final data = await supabase
        .from('users')
        .select<Map<String, dynamic>>()
        .eq('user_id', userId)
        .single();
    nameTextController.text = data['name'];
    useNameTextController.text = data['user_name'];
    selfIntroduceTextController.text = data['self_introduce'];
  }

Future<void> update() async {
  final user = supabase.auth.currentUser;
  final updates = {
    'name': nameTextController.text,
    'user_name': useNameTextController.text,
    'self_introduce': selfIntroduceTextController.text,
    'updated_at': DateTime.now().toIso8601String(),
  };

  try {
      await supabase.from('users').update(updates).match({'user_id': user!.id});
      final snackBar = SnackBar(content: Text('データの更新が完了しました'));
      ScaffoldMessenger.of(context).showSnackBar(snackBar);
      await Future.delayed(Duration(seconds: 2));
      Navigator.pop(context);
    } on PostgrestException catch (error) {
      print(error);
    }
  }
}

最後に

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

ちょっとした宣伝

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