Firebaseの代替OSS！Supabaseその3

こんにちは、株式会社PentagonでエンジニアをしているYamatoです。

前回紹介したsupabaseの記事の続きとなります。https://note.com/yamatozaqz/n/nfae1c6e3001d

前回はサインアップ、サインイン、サインアウトの３つの機能を実装したFluttterアプリを作成しましたが、今回はデータベースを扱ってみることにしました。

下準備をします。

まず、Supabaseの管理画面上から、Table editorを開き、NewTableの順にクリックをします。Add new tableが表示されたら、Nameに「data」を入力し、Saveをします。All tablesにテーブル情報が表示されるので、＋からカラムを追加します。Nameに「name」TypeにvarcharをセットしてSaveをします。前回のアプリにlib/utilsを追加してデータベース接続を管理するclassを追加します。

# lib/utils/supabase_manager.dart
import 'package:supabase/supabase.dart';

const supabaseUrl = 'URLをここに';
const supabaseKey = 'Anon Keyをここに';

class SupabaseManager {
 final client = SupabaseClient(supabaseUrl, supabaseKey);

 getData() async {
   var response = await client.from('data').select().execute();
   if (response.error == null) {
     print('response.data: ${response.data}');
   }
 }

 addData(String inputName) async {
   await client.from('data').insert([{'name': inputName}]).execute();
 }
}

ログイン後に表示されるhome_viewのchildにボタンを追加してaddDataが呼ばれるようにします。

# lib/views/home_view.dart

#　以下を先頭のほうに追加
import 'package:supabase_flutter/utils/supabase_manager.dart';

# childにボタンを追加する
RaisedButton(
    onPressed: () async {
        await supabaseManager.addData('inputName');
        print('added data');
    },
    child: Text('Add Data'),
)

同様にRead Dataを追加して、起動すると以下のようになります。

Add Dataをタップすると

flutter: added data
flutter: response.data: [{id: 1, name: friendName}, {id: 2, name: inputName}]
flutter: Got Data

と表示され、無事にデータを挿入・参照することができました。
次回はソーシャルログイン機能を実装していきます。