【Flutter】Firebase Authenticationを使ってログイン/ユーザー登録画面を作成する(その4)

# はじめに

【Flutter】Firebase Authenticationを使ってログイン/ユーザー登録画面を作成する(その3)の続きです。
前回はメールアドレスでのユーザー登録の実装を行いました。
今回はログイン画面を作成し、ログインできるように実装します。
引き続きVSCodeのMac版を利用していますので、AndroidStudio利用の方は適宜読み替えて行ってみてください。

# 更新履歴
2024.1.18 初回投稿

# ログインボタンを追加してログイン処理を実装
- 前回のコードにログインボタンとログアウトボタンを追加します。
    ```dart
       SizedBox(
        width: double.infinity,
        // ログインボタン
        child: ElevatedButton(
          child: const Text('ログイン'),
          onPressed: () async {
            try {
              // メール/パスワードでログイン
              final FirebaseAuth auth = FirebaseAuth.instance;
              await auth.signInWithEmailAndPassword(
                email: email,
                password: password,
              );
              // ユーザー登録に成功した場合
              setState(() {
                infoText = "ログインに成功しました！";
              });
            } catch (e) {
              // ユーザー登録に失敗した場合
              setState(() {
                infoText = "ログインに失敗しました：${e.toString()}";
              });
            }
          },
        ),
      ),
    ```
# ログアウトボタンを追加してログアウト処理を実装
- 次にログアウトボタンを追加して、ログアウト処理を追加します。
    ```dart
       SizedBox(
        width: double.infinity,
        // ログアウトボタン
        child: ElevatedButton(
          child: const Text('ログアウト'),
          onPressed: () async {
            try {
              // ログアウト
              await FirebaseAuth.instance.signOut();
              // ユーザー登録に成功した場合
              setState(() {
                infoText = "ログアウトしました";
              });
            } catch (e) {
              // ユーザー登録に失敗した場合
              setState(() {
                infoText = "ログアウトに失敗しました：${e.toString()}";
              });
            }
          },
        ),
      ),
    ```
## ここまでの全コード
```dart
    import 'package:flutter/material.dart';
    import 'package:firebase_auth/firebase_auth.dart';
    import 'package:firebase_core/firebase_core.dart';
    import 'firebase_options.dart';
    
    void main() async {
      WidgetsFlutterBinding.ensureInitialized();
      await Firebase.initializeApp(
        options: DefaultFirebaseOptions.currentPlatform,
      );
      runApp(const LoginSample());
    }
    
    class LoginSample extends StatelessWidget {
      const LoginSample({super.key});
    
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(
          title: 'Login Sample',
          home: LoginPage(),
        );
      }
    }
    
    class LoginPage extends StatefulWidget {
      const LoginPage({super.key});
    
      @override
      State<LoginPage> createState() => _LoginPageState();
    }
    
    class _LoginPageState extends State<LoginPage> {
      // メッセージ表示用
      String infoText = '';
      // 入力したメールアドレス・パスワード
      String email = '';
      String password = '';
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Container(
              padding: const EdgeInsets.all(24),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  // メールアドレス入力
                  TextFormField(
                    decoration: const InputDecoration(labelText: 'メールアドレス'),
                    onChanged: (String value) {
                      setState(() {
                        email = value;
                      });
                    },
                  ),
                  // パスワード入力
                  TextFormField(
                    decoration: const InputDecoration(labelText: 'パスワード'),
                    obscureText: true,
                    onChanged: (String value) {
                      setState(() {
                        password = value;
                      });
                    },
                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    // メッセージ表示
                    child: Text(infoText),
                  ),
                  SizedBox(
                    width: double.infinity,
                    // ユーザー登録ボタン
                    child: ElevatedButton(
                      child: const Text('ユーザー登録'),
                      onPressed: () async {
                        try {
                          // メール/パスワードでユーザー登録
                          final FirebaseAuth auth = FirebaseAuth.instance;
                          await auth.createUserWithEmailAndPassword(
                            email: email,
                            password: password,
                          );
                          // ユーザー登録に成功した場合
                          setState(() {
                            infoText = "登録に成功しました！";
                          });
                        } catch (e) {
                          // ユーザー登録に失敗した場合
                          setState(() {
                            infoText = "登録に失敗しました：${e.toString()}";
                          });
                        }
                      },
                    ),
                  ),
                  SizedBox(
                    width: double.infinity,
                    // ログインボタン
                    child: ElevatedButton(
                      child: const Text('ログイン'),
                      onPressed: () async {
                        try {
                          // メール/パスワードでログイン
                          final FirebaseAuth auth = FirebaseAuth.instance;
                          await auth.signInWithEmailAndPassword(
                            email: email,
                            password: password,
                          );
                          // ユーザー登録に成功した場合
                          setState(() {
                            infoText = "ログインに成功しました！";
                          });
                        } catch (e) {
                          // ユーザー登録に失敗した場合
                          setState(() {
                            infoText = "ログインに失敗しました：${e.toString()}";
                          });
                        }
                      },
                    ),
                  ),
                  SizedBox(
                    width: double.infinity,
                    // ログアウトボタン
                    child: ElevatedButton(
                      child: const Text('ログアウト'),
                      onPressed: () async {
                        try {
                          // ログアウト
                          await FirebaseAuth.instance.signOut();
                          // ユーザー登録に成功した場合
                          setState(() {
                            infoText = "ログアウトしました";
                          });
                        } catch (e) {
                          // ユーザー登録に失敗した場合
                          setState(() {
                            infoText = "ログアウトに失敗しました：${e.toString()}";
                          });
                        }
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }
```
次は、パスワードリセットを実装していきたいと思います。

https://qiita.com/yoshikoba/items/22107f555e686e745db6