【TODOアプリ作成】Flutter・Firebaseでゼロからアプリをつくる。

mailによる認証

firebaseでmail認証の有効化

左メニュの「Authentication」を選択。
ログイン方法から「メール/パスワード」を有効化

ログインページの作成

画像を配置します。

今回はFlutter公式からダウンロードしたこちらの画像を使います。
flutter-todo/assets/flutter.png

画像を読み込みます。

flutter-todo/pubspec.yaml

　# assets/ と設定するでassetsフォルダ内の画像を全て読み込みます

  assets:

  - assets/

flutter-todo/lib/ui/login.dart

import 'package:flutter/material.dart';

import 'package:firebase_auth/firebase_auth.dart';

class LoginPage extends StatefulWidget {
  LoginPage();

  @override
  State<StatefulWidget> createState() => new _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final emailInputController = new TextEditingController();
  final passwordInputController = new TextEditingController();
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;

  Future<FirebaseUser> _signIn(String email, String password) async {
    final FirebaseUser user = await _firebaseAuth.signInWithEmailAndPassword(
        email: email, password: password);
    if (user.uid.length > 0 && user.uid != null) {
      Navigator.pushNamed(context, '/home');
    }
    return user;
  }

  Future<FirebaseUser> _signUp(String email, String password) async {
    FirebaseUser user = await _firebaseAuth.createUserWithEmailAndPassword(
        email: email, password: password);
    if (user.uid.length > 0 && user.uid != null) {
      Navigator.pushNamed(context, '/home');
    }
    return user;
  }

  Widget _showBody() {
    return Center(
      child: Form(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(
              horizontal:
                  16.0), // horizontal : left = horizontal, right = horizontal
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              _showIcon(),
              const SizedBox(height: 250.0),
              _showEmailForm(),
              const SizedBox(height: 24.0),
              _showPasswordForm(),
              const SizedBox(height: 24.0),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    _showLoginButton(),
                    _showSignUpButton(),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _showIcon() {
    return Center(
      child: Image.asset(
        'assets/flutter.png',
        width: 100.0,
      ),
    );
  }

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

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

  Widget _showLoginButton() {
    return Center(
      child: RaisedButton(
        child: const Text(
          'Login',
        style: TextStyle(color: Colors.white)),
        color: Colors.lightBlueAccent,
        onPressed: () {
          var email = emailInputController.text;
          var password = passwordInputController.text;
          return _signIn(email, password)
              .then((FirebaseUser user) => print(user))
              .catchError((e) => print(e));
        },
      )
    );
  }

  Widget _showSignUpButton() {
    return Center(
      child: RaisedButton(
        child: const Text('SignUp'),
        onPressed: () {
          var email = emailInputController.text;
          var password = passwordInputController.text;
          return _signUp(email, password)
              .then((FirebaseUser user) => print(user))
              .catchError((e) => print(e));
        },
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _showBody(),
    );
  }
}

routeの設定をします。
flutter-todo/lib/main.dart

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Todo List',

      navigatorObservers: <NavigatorObserver>[observer],

      home: LoginPage(),

      routes: <String, WidgetBuilder> {

        '/login': (BuildContext context) => new LoginPage(),

        '/home': (BuildContext context) => new ListViewNote(

          title: 'Todo List',

          analytics: analytics,

          observer: observer,

        ),

      },

    );

  }

}

新規にユーザを登録してみましょう

登録に成功するとfirebaseのコンソールからユーザを確認することができるようになります。

ここまでで認証の実装は終わりです。

成果物

こちらが完成した成果物になります。

ソースコードはこちら。