1. Firebase Authentication の準備

Authentication > Sign-in method > メール / パスワードを選んで「有効にする」をチェックし保存する。

2.ライブラリのインストール

pubspec.yaml

# ...
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  firebase_core: ^1.17.1
  firebase_auth: ^3.3.19 # この行を追加

カワグチミサキ

メールアドレスとパスワードを使って新規登録をする

1. TextEditingControllerを使用してTextFormFieldに入力された内容を取得する

sign_in_screen.dart

class _SignInScreenState extends State<SignInScreen> {

// メールアドレス用のTextEditingController
final TextEditingController _emailController = TextEditingController();
// パスワード用のTextEditingController
final TextEditingController _passwordController = TextEditingController();
}

// ...
TextFormField(
  controller: _emailController,
  decoration: const InputDecoration(
    labelText: 'メールアドレス',
  ),
  validator: Validate.email,
),

TextFormField(
  controller: _passwordController,
  decoration: const InputDecoration(labelText: 'パスワード',),
  keyboardType: TextInputType.visiblePassword,
  obscureText: true,
  validator: Validate.password,
),

2. ログイン画面に新規登録の機能を追加する

sign_in_screen.dart

Future<void> _onSignUp() async {
  try {
    // 入力内容を確認する
    if (_formKey.currentState?.validate() != true) {
      // エラーメッセージがあるため処理を中断する
      return;
    }

    // メールアドレス・パスワードで新規登録
    // TextEditingControllerから入力内容を取得
    final String email = _emailController.text;
    final String password = _passwordController.text;
    await FirebaseAuth.instance.createUserWithEmailAndPassword(email: email, password: password);

    // 画像一覧画面に切り替え
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(
        builder: (_) => const PhotoListScreen(),
      ),
    );
  } catch (e) {
    // 失敗したらエラーメッセージを表示
    await showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text('エラー'),
          content: Text(e.toString()),
        );
      },
    );
  }
}

カワグチミサキ

ログアウトする

photo_list_screen.dart

appBar: AppBar(
  title: const Text('Photo App'),
  actions: [
    // ログアウト用ボタン
    IconButton(
      onPressed: _onSignOut,
      icon: const Icon(
        Icons.exit_to_app,
      ),
    ),
  ],
),

Future<void> _onSignOut() async {
  // ログアウト処理
  await FirebaseAuth.instance.signOut();

  // ログアウトに成功したらログイン画面に戻す
  //   現在の画面は不要になるのでpushReplacementを使う
  Navigator.of(context).pushReplacement(
    MaterialPageRoute(
      builder: (_) => SignInScreen(),
    ),
  );
}

カワグチミサキ

ログインする

sign_in_screen.dart

Future<void> _onSignIn() async{
  try {
    // 入力内容を確認する
    if (_formKey.currentState?.validate() != true) {
      // エラーメッセージがあるため処理を中断する
      return;
    }

    // メールアドレス・パスワードでログイン
    // TextEditingControllerから入力内容を取得
    final String email = _emailController.text;
    final String password = _passwordController.text;
    await FirebaseAuth.instance.signInWithEmailAndPassword(email: email, password: password);

    // 画像一覧画面に切り替え
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(
        builder: (_) => const PhotoListScreen(),
      ),
    );
  } catch(e) {
    // 失敗したらエラーメッセージを表示
    await showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text('エラー'),
          content: Text(e.toString()),
        );
      },
    );
  }
}

カワグチミサキ

起動時の画面を切り替える

main.dart

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Photo App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // ログイン状態に応じて表示する画面を切り替える
      home: FirebaseAuth.instance.currentUser == null
          ? const SignInScreen()
          : const PhotoListScreen(),
    );
  }
}