前回は、FlutterでFirebaseを使用するために設定し、ログインを実装しました。

今回は、ユーザー登録機能を実装します。

今回もFirebaseとFlutterをやりとりするのには、パッケージでget_itを使用します。

Firebaseの設定やログインのソースコードは、前回の内容をご確認ください。

まずは、firebase_service.dartにAuthenticationと連携するため、registerUser関数を作成します。

registerUserでは、emailpasswordを設定します。

class FirebaseService {
  FirebaseAuth _auth = FirebaseAuth.instance;

  FirebaseService();

  Future<bool> registerUser({
    required String email,
    required String password,
  }) 

FirebaseAuthcreateUserWithEmailAndPasswordを使用し、emailとpasswordを非同期で確認します。

emailとpasswordが存在していた場合trueを返し、存在していない場合falseを開始ます。

また、ログイン時エラーが発生した場合falseを返すように、try/catchで設定します。

Future<bool> registerUser({
  required String email,
  required String password,
}) async {
  try {
    UserCredential _userCredential = await _auth
        .createUserWithEmailAndPassword(email: email, password: password);
    return true;
  } catch (e) {
    print(e);
    return false;
  }
}

次は、register.dartを作成します。

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

  @override
  State<Register> createState() => _RegisterState();
}

class _RegisterState extends State<Register> {
  double? _deviceWidth, _deviceHeight;

  final GlobalKey<FormState> _registerKey = GlobalKey<FormState>();

  String? _email;
  String? _password;

  void _register() async {
    _registerKey.currentState!.save();

  }

  @override
  Widget build(BuildContext context) {
    _deviceWidth = MediaQuery.of(context).size.width;
    _deviceHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.symmetric(
            horizontal: _deviceWidth! * 0.05,
          ),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const Text(
                  'ユーザー登録',
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                ),
                Container(
                  height: _deviceHeight! * 0.2,
                  child: Form(
                    key: _registerKey,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      mainAxisSize: MainAxisSize.max,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        TextFormField(
                          decoration:
                              const InputDecoration(hintText: 'メールアドレス'),
                          onSaved: (_value) {
                            setState(() {
                              _email = _value;
                            });
                          },
                        ),
                        TextFormField(
                          obscureText: true,
                          decoration: const InputDecoration(hintText: 'パスワード'),
                          onSaved: (_value) {
                            setState(() {
                              _password = _value;
                            });
                          },
                        ),
                      ],
                    ),
                  ),
                ),
                MaterialButton(
                  onPressed: _register,
                  minWidth: _deviceWidth! * 0.5,
                  height: _deviceHeight! * 0.06,
                  color: Colors.blueAccent,
                  child: const Text(
                    '登録',
                    style: TextStyle(
                        color: Colors.white, fontWeight: FontWeight.bold),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

get_itfirebase_serviceをインポートします。

import 'package:get_it/get_it.dart';
import 'package:test_form/services/firebase_service.dart';

FirebaseServiceの変数を作成します。

class _RegisterState extends State<Register> {
  double? _deviceWidth, _deviceHeight;

  FirebaseService? _firebaseService;

initStateを作成し、GetItgetFirebaseServiceを呼び出します。

@override
void initState() {
  super.initState();
  _firebaseService = GetIt.instance.get<FirebaseService>();
}

FirebaseのAuthenticationの接続を確認するために、_register_firebaseServiceregisterUserを設定します。

_resultを表示できるようにしておきましょう。

一通り完成したので、動作確認します。

image2

メールアドレスとパスワードを入力し、登録ボタンをタップすると、

image3

認証結果:trueが返ってきました。

FirebaseのAuthenticationにアクセスしてみます。

image4

先程登録したメールアドレスが追加されていました。

では、メールアドレスではない文字を入力し、登録ボタンをタップします。

image5

認証結果:falseが返ってきました。

次回は、get_itとcloud_firestoreで、Firebaseのデータベースを実装する

ブログ一覧