虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

FlutterとFirebaseAuthを使ったログインフォーム

f:id:superman199323:20181106094455j:plain

FlutterとFirebaseAuthを使ったログインフォーム

前提としてFlutterとFirebaseがちゃんと接続されていること

pubspecに追加

dependencies:
  flutter:
    sdk: flutter

  firebase_auth: ^0.5.20

コードを書く

まずはレイアウト

Widget _layoutBody() {
    return new Center(
      child: new Form(
        child: new SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              _titleBody(),
              const SizedBox(height: 24.0),
              _formEmail(),
              const SizedBox(height: 24.0),
              _passwordForm(),
              const SizedBox(height: 24.0),
              _editPasswordLink(),
              _loginButton(),
            ],
          ),
        ),
      ),
    );
  }

Widget _formEmail() {
    return TextFormField(
      controller: emailInputController,
      decoration: const InputDecoration(
        border: const UnderlineInputBorder(),
        labelText: 'Email',
      ),
    );
  }

  Widget _passwordForm() {
    return TextFormField(
      controller: passwordInputController,
      decoration: new InputDecoration(
        border: const UnderlineInputBorder(),
        labelText: 'Password',
      ),
      obscureText: true,
    );
  }

Widget _loginButton() {
    return new Center(
      child: new RaisedButton(
        child: const Text('Login'),
        onPressed: () {
          var email = emailInputController.text;
          var password = passwordInputController.text;
          _onLoading();
          // ここでログイン処理を書く
          });
        },
      ),
    );
  }

  • ログインボタンを押した時の処理
Future<FirebaseUser> singIn(String email, String password) async {
    final FirebaseAuth _auth = FirebaseAuth.instance;
    final FirebaseUser user = await _auth.signInWithEmailAndPassword(
        email: email, password: password);
    print("User id is ${user.uid}");
    return user;
  }
  • サインアップ処理
Future<FirebaseUser> signUp(String email, String password) async {
    final FirebaseAuth _auth = FirebaseAuth.instance;
    final FirebaseUser user = await _auth.createUserWithEmailAndPassword(
        email: email, password: password);
    print(user);
    return user;
  }

これで完成。Atuh処理もお手軽でいいなー