前のページはこちら

【Auth編】ユーザー登録・ログイン・ログアウト実装

Auth編でユーザー登録、ログイン、ログアウトが出来るようになりました。続いてsupabaseのデータベース操作を行ってみます。

DBテスト用のFlutterコード準備

supabase_repository.dartの準備

supabase_repository.dartに今度は下記をコピペしてください。（DB編から始める方は新しくファイルを作ってください）今後はここに追記していきます。

前回のAuthの完成コードに新しいDBUpdateとDBDataGetメソッド、またデータベース取得時に変換するクラスも追加しています（後で説明します）

import 'package:supabase_flutter/supabase_flutter.dart';

class GetUserData {
  String name = '';
  DateTime update = DateTime.now();

  GetUserData.fromJson(Map<String, dynamic> json)
      : name = json['username'],
        update = DateTime.parse(json['updated_at']);
}

class SupabaseRepository {
  static var AuthuserId = Supabase.instance.client.auth.currentUser;
  static List<GetUserData> getUserDatas = [];

  static Future<bool> SignUp({email, pass}) async {
    var test = Supabase.instance.client.auth.currentUser;

    try {
      var supabaseAuth = Supabase.instance.client.auth;
      var response = await supabaseAuth.signUp(email, pass);

      if (response.error != null) {
        print("エラーです" + response.error!.message);
        throw new Exception(response.error);
      }
      print('アカウントが生成できました${response.user!.id}');
      return true;
    } catch (e) {
      return false;
    }
  }

  static Future<bool> LogIn({email, pass}) async {
    try {
      var supabaseAuth = Supabase.instance.client.auth;

      var response = await supabaseAuth.signIn(email: email, password: pass);

      if (response.error != null) {
        print("エラーです" + response.error!.message);
        throw new Exception(response.error);
      }
      return true;
    } catch (e) {
      return false;
    }
  }

  static Future<bool> LogOut() async {
    try {
      var supabaseAuth = Supabase.instance.client.auth;

      var response = await supabaseAuth.signOut();

      if (response.error != null) {
        print("エラーです" + response.error!.message);
        throw new Exception(response.error);
      }
      return true;
    } catch (e) {
      return false;
    }
  }

  static Future<bool> DBUpdate({name}) async {
    return true;
  }

  static Future<bool> DBDataGet({findString}) async {
    return true;
  }
}

auth_page_view.dartの準備

テスト用の外観であるauth_page_view.dartはこちらをコピペしてください。

import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import 'supabase_repository.dart';

class AuthPageView extends StatefulWidget {
  const AuthPageView({Key? key}) : super(key: key);

  @override
  _AuthPageViewState createState() => _AuthPageViewState();
}

class _AuthPageViewState extends State<AuthPageView> {
  TextEditingController _emailController = TextEditingController();
  TextEditingController _passController = TextEditingController();
  TextEditingController _nameController = TextEditingController();

  //Supabase.instance.client.auth.currentUser!.email;
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 12),
      children: [
        const SizedBox(height: 18),
        Text('${Supabase.instance.client.auth.currentUser?.email}'),
        const SizedBox(height: 18),
        TextFormField(
          controller: _emailController,
          decoration: const InputDecoration(labelText: 'Email'),
        ),
        TextFormField(
          controller: _passController,
          decoration: const InputDecoration(labelText: 'Pass'),
        ),
        const SizedBox(height: 18),
        ElevatedButton(
          onPressed: () async {
            var _res = await SupabaseRepository.LogIn(
              email: _emailController.text,
              pass: _passController.text,
            );
            print('ログイン終了');
            setState(() {});
          },
          child: Text('ログイン'),
        ),
        const SizedBox(height: 18),
        ElevatedButton(
          onPressed: () async {
            var _res = await SupabaseRepository.SignUp(
              email: _emailController.text,
              pass: _passController.text,
            );
            print('アカウント作成終了');
          },
          child: Text('アカウント作成'),
        ),
        const SizedBox(height: 18),
        ElevatedButton(
          onPressed: () async {
            var _res = await SupabaseRepository.LogOut();
            print('ログアウト');
            setState(() {});
          },
          child: Text('ログアウト'),
        ),
        const SizedBox(height: 30),
        TextFormField(
          controller: _nameController,
          decoration:
              const InputDecoration(labelText: '変更する名前（ログイン後）もしくは名前検索文字列'),
        ),
        const SizedBox(height: 18),
        ElevatedButton(
          onPressed: () async {
            var _res = await SupabaseRepository.DBUpdate(
              name: _nameController.text,
            );
            print('作成終了');
          },
          child: Text('名前変更'),
        ),
        const SizedBox(height: 30),
        ElevatedButton(
          onPressed: () async {
            var _res = await SupabaseRepository.DBDataGet(
              findString: _nameController.text,
            );
            print('データゲット完了');
            setState(() {});
          },
          child: Text('データゲット'),
        ),
        Column(
            children: SupabaseRepository.getUserDatas
                .map((GetUserData item) => Row(
                      children: [
                        Text(item.name),
                        Text(':'),
                        Text(item.update.toString()),
                      ],
                    ))
                .toList())
      ],
    );
  }
}

main.dart

main.dartはAuth編と変わりません。下記のコードとなります。

「url」と「anonKey」は自分のAPIURLとAPIキーを入れます。

自分のAPIURLと自分のAPIキーの確認方法はこちらです　→　APIキーとAPIURL(ソースコードをgitにアップする方は要注意の部分も必ず読んでください)

import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

import 'auth_page_view.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Supabase.initialize(
    ！！確認：gitにアップする方は、これらの情報がgitにアップされない形に必ずしてください。
    url: あなたのAPIURLを''で囲った文字列として入力します,
    anonKey:
        あなたのAPIキーを''で囲った文字列として入力します,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('flutterとsupabase')),
        body: AuthPageView(),
      ),
    );
  }
}

実行

このような画面になります。

次のページはこちら

【DB編】データの追加＆変更