Flutter2.2とFirestoreでチャットアプリを写経してみる（２）Authenticationでログイン
https://www.flutter-study.dev/firebase-app/authentication を写経して、FlutterとFirestoreを用いたチャットアプリを写経しています。前回は、Firebaseプロジェクトの作成とFlutterアプリとの紐づけ、Flutterアプリの雛形作成を行いました。
今回は、
- ログイン機能
- メールアドレスとパスワードで新規登録する機能
- ログアウト機能
を実装します。
Flutter2.2とFirestoreでチャットアプリを写経してみる目次
開発環境
Panasonic CF-QV
Windows 10 Pro (1909)
git version 2.29.2.windows.2
Chrome
flutter_windows_2.2.0-stable
VisualStudioCode 1.55.2
VisualStudioCodeのExtensions（拡張機能）『Flutter(dart-code.fultter)』gitのインストールについては、こちらのサイトが分かりやすいです。
Flutterのインストールについてはこちらへ。
日本語が文字化けする場合は flutter run -d chrome --web-renderer html で開発サーバを起動します。Netlifyへのアップロード方法はこちらをご覧ください。
import文とmain()関数
FirebaseのAuthenticationとFirestoreを利用するために、 lib/main.dart の最初の方を以下のように書き換えます。
import 'package:flutter/material.dart';
// Import the firebase_core, firebase_auth, and cloud_firestore plugin
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
Future<void> main() async {
// 初期化処理を追加 (Firebase利用のために以下の2行が必要)
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyChatApp());
}
lib/main.dartの一番最初のvoid main() asycnc {} の中身に、WidgetsFlutterBinding.ensureInitialized(); が必要である理由ですが、こちらのリンクを読んでもよくわからなかったですが、とりあえず、Firebaseを用いるときは、おまじないのように以下のように記載しておく必要があるそうです。
void main() async {
// 初期化処理を追加
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyChatApp());
}https://tesshus-blog.netlify.app/flutter-camera/
Flutter製のアプリでカメラを使う
February 15, 2020
FirebaseプロジェクトでAuthenticationの機能を有効化
https://www.flutter-study.dev/firebase/authentication を見ながら、メール/パスワードでログイン機能を設定します。
https://console.firebase.google.com/ で、前回作成したFirebaseプロジェクトを開き、左側の Authentication をクリック
LoginPageウィジェットにメールアドレスパスワード認証（Firebase Authentication）のコードを記載
https://www.flutter-study.dev/firebase-app/authentication を写経します。
参考：
class LoginPage extends StatelessWidget {} の中身を以下のように書き換えます。
// ログイン画面用Widget
// 状態を持ったWidgetなのでStatefulWidgetにする
// https://www.flutter-study.dev/widgets/state-widget/
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
// メッセージ表示用
String infoText = '';
// 入力したメールアドレス・パスワード
String email = '';
String password = '';
@override
Widget build(BuildContext context) {
// Scaffold widget → https://www.flutter-study.dev/master-widgets/scaffold/
return Scaffold(
body: Center(
child: Container(
padding: EdgeInsets.all(24),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// メールアドレス入力TextFormField
TextFormField(
decoration: InputDecoration(labelText: 'メールアドレス'),
onChanged: (String value) {
setState(() {
email = value;
});
},
),
// パスワード入力 TextFormFiled
TextFormField(
decoration: InputDecoration(labelText: 'パスワード'),
obscureText: true,
onChanged: (String value) {
setState(() {
password = value;
});
},
),
// メッセージ表示
Container(
padding: EdgeInsets.all(8),
child: Text(infoText),
),
// 登録ボタン
Container(
width: double.infinity,
child: ElevatedButton(
child: Text('ユーザー登録'),
onPressed: () async {
try {
// メール・パスワードでユーザー登録
// https://www.flutter-study.dev/firebase/authentication
final FirebaseAuth auth = FirebaseAuth.instance;
await auth.createUserWithEmailAndPassword(
email: email,
password: password,
);
// ユーザー登録に成功した場合
// チャット画面に遷移 ＋ ログイン画面を破棄
await Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) {
return ChatPage();
}),
);
} catch (e) {
// ユーザー登録に失敗した場合
setState(() {
infoText = "登録に失敗しました：${e.toString()}";
});
}
}))
]))),
);
}(変更前)
（変更後）
container → https://qiita.com/coka__01/items/dedb569f6357f1b503fd#container
TextFormField → 【誰でも分かる！】FlutterのFormを一から作りながら解説してみたよ 2020.6.3
LoginPageを編集してログイン機能を実装
class _LoginPageState extends State<LoginPage> { }の中身の登録ボタンのContainer() の後に、”,” を追加し、さらに、以下のコードを追加します。
const SizedBox(height: 8),
// ログインボタン
Container(
width: double.infinity,
child: OutlinedButton(
child: Text('ログイン'),
onPressed: () async {
try {
// メール・パスワードでログイン
final FirebaseAuth auth = FirebaseAuth.instance;
await auth.signInWithEmailAndPassword(
email: email, password: password);
// ログインに成功した場合
// チャット画面に遷移 ＋ ログイン画面を吐き
await Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) {
return ChatPage();
}),
);
} catch (e) {
// ログインに失敗した場合
setState(() {
infoText = 'ログインに失敗しました：${e.toString()}';
});
}
},
))（変更前）
（変更後）
_LoginPageStateとChatPageを編集して、ログインしたユーザー情報を表示
https://www.flutter-study.dev/firebase-app/authentication を写経して、以下のように変更します。