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

![スクリーンショット 2023-11-30 17.37.29（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/35ea3bd9-6798-5b15-e934-eaf1d0f6c951.png)

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

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

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

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

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

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

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

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

```dart
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的なもの）
- 自己紹介
- 更新した情報

```dart
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を表示することにしました。

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

# ソースコード

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


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">