🐺
【flutter】Cloud FirestoreとAuthenticationを使ったチャットアプリをつくれるオススメの記事
はじめに
Cloud FirestoreとAuthenticationを使ってチャットアプリをつくれるとても良い記事があるのですが、少し古いせいかうまく行かない部分があるので、補足をします。(前も同じ作者さんの記事の補足をしました）
上から順にやってみてもらいたいのですが、その際に設定してほしいことがいくつかあります。
1. pubspec.yamlのpackageのバージョンを変更する
記事にある通りの実装ではcloud_firestoreがうまく動きませんでした。
pubspec.yaml
firebase_core: ^1.0.1
firebase_auth: ^1.0.1
cloud_firestore: ^3.1.13
provider: ^6.0.2
flutter_riverpod: ^1.0.3
2022/05/11現在は上記で設定すれば問題なく動きます。
2. index.htmlのbodyタグ内の上部にscriptタグを貼る
ビルドしてボタンを押したときfirebase関連の関数を呼び出すのですが、その時エラーがたくさん出ました。以下のSDKがインストールできていないから手動で追加するとよいと記事にあり、実際行うと解消されます。
あらかじめ貼っておくと良いと思います。
index.heml
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
3. FirebaseOptionsに引数を追加する
"FirebaseOptions cannot be null when creating the default app."このようなエラーが出るので以下の記事を参考に設定してみてください。
4. コードを修正する
こちらの記事での話です。(一番最後)
バージョンが上がったことでriverpodの書き方が変わったようです。
ScopedReader watch
↓
WidgetRef ref
final infoText = watch(infoTextProvider).state;
↓
final infoText = ref.watch(infoTextProvider);
context.read(emailProvider.state) = value;
↓
ref.read(emailProvider.state).state= value;
12点ほど修正する箇所があると思います。
main関数以外のコード全体です。
main.dart
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// ユーザー情報の受け渡しを行うためのProvider
final userProvider = StateProvider((ref) {
return FirebaseAuth.instance.currentUser;
});
// エラー情報の受け渡しを行うためのProvider
// ※ autoDisposeを付けることで自動的に値をリセットできます
final infoTextProvider = StateProvider.autoDispose((ref) {
return '';
});
// メールアドレスの受け渡しを行うためのProvider
// ※ autoDisposeを付けることで自動的に値をリセットできます
final emailProvider = StateProvider.autoDispose((ref) {
return '';
});
// パスワードの受け渡しを行うためのProvider
// ※ autoDisposeを付けることで自動的に値をリセットできます
final passwordProvider = StateProvider.autoDispose((ref) {
return '';
});
// メッセージの受け渡しを行うためのProvider
// ※ autoDisposeを付けることで自動的に値をリセットできます
final messageTextProvider = StateProvider.autoDispose((ref) {
return '';
});
// StreamProviderを使うことでStreamも扱うことができる
// ※ autoDisposeを付けることで自動的に値をリセットできます
final postsQueryProvider = StreamProvider.autoDispose((ref) {
return FirebaseFirestore.instance
.collection('posts')
.orderBy('date')
.snapshots();
});
class ChatApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'ChatApp',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: LoginPage(),
);
}
}
// ConsumerWidgetでProviderから値を受け渡す
class LoginPage extends ConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) {
// Providerから値を受け取る
final infoText = ref.watch(infoTextProvider);
final email = ref.watch(emailProvider);
final password = ref.watch(passwordProvider);
return Scaffold(
body: Center(
child: Container(
padding: EdgeInsets.all(24),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'メールアドレス'),
onChanged: (String value) {
// Providerから値を更新
ref.read(emailProvider.state).state = value;
},
),
TextFormField(
decoration: InputDecoration(labelText: 'パスワード'),
obscureText: true,
onChanged: (String value) {
// Providerから値を更新
ref.read(passwordProvider.state).state = value;
},
),
Container(
padding: EdgeInsets.all(8),
child: Text(infoText),
),
Container(
width: double.infinity,
child: ElevatedButton(
child: Text('ユーザー登録'),
onPressed: () async {
try {
final FirebaseAuth auth = FirebaseAuth.instance;
final result = await auth.createUserWithEmailAndPassword(
email: email,
password: password,
);
// ユーザー情報を更新
ref.read(userProvider.state).state = result.user;
await Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) {
return ChatPage();
}),
);
} catch (e) {
// Providerから値を更新
ref.read(infoTextProvider.state).state =
"登録に失敗しました：${e.toString()}";
}
},
),
),
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) {
// Providerから値を更新
ref.read(infoTextProvider.state).state =
"ログインに失敗しました：${e.toString()}";
}
},
),
),
],
),
),
),
);
}
}
// ConsumerWidgetでProviderから値を受け渡す
class ChatPage extends ConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) {
// Providerから値を受け取る
final User user = ref.watch(userProvider)!;
final AsyncValue<QuerySnapshot> asyncPostsQuery =
ref.watch(postsQueryProvider);
return Scaffold(
appBar: AppBar(
title: Text('チャット'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.close),
onPressed: () async {
await FirebaseAuth.instance.signOut();
await Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (context) {
return LoginPage();
}),
);
},
),
],
),
body: Column(
children: [
Container(
padding: EdgeInsets.all(8),
child: Text('ログイン情報：${user.email}'),
),
Expanded(
// StreamProviderから受け取った値は .when() で状態に応じて出し分けできる
child: asyncPostsQuery.when(
// 値が取得できたとき
data: (QuerySnapshot query) {
return ListView(
children: query.docs.map((document) {
return Card(
child: ListTile(
title: Text(document['text']),
subtitle: Text(document['email']),
trailing: document['email'] == user.email
? IconButton(
icon: Icon(Icons.delete),
onPressed: () async {
// 投稿メッセージのドキュメントを削除
await FirebaseFirestore.instance
.collection('posts')
.doc(document.id)
.delete();
},
)
: null,
),
);
}).toList(),
);
},
// 値が読込中のとき
loading: () {
return Center(
child: Text('読込中...'),
);
},
// 値の取得に失敗したとき
error: (e, stackTrace) {
return Center(
child: Text(e.toString()),
);
},
),
),
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () async {
await Navigator.of(context).push(
MaterialPageRoute(builder: (context) {
return AddPostPage();
}),
);
},
),
);
}
}
// ConsumerWidgetでProviderから値を受け渡す
class AddPostPage extends ConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) {
// Providerから値を受け取る
final user = ref.watch(userProvider)!;
final messageText = ref.watch(messageTextProvider);
return Scaffold(
appBar: AppBar(
title: Text('チャット投稿'),
),
body: Center(
child: Container(
padding: EdgeInsets.all(32),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: '投稿メッセージ'),
keyboardType: TextInputType.multiline,
maxLines: 3,
onChanged: (String value) {
// Providerから値を更新
ref.read(messageTextProvider.state).state = value;
},
),
const SizedBox(height: 8),
Container(
width: double.infinity,
child: ElevatedButton(
child: Text('投稿'),
onPressed: () async {
final date = DateTime.now().toLocal().toIso8601String();
final email = user.email;
await FirebaseFirestore.instance
.collection('posts')
.doc()
.set({
'text': messageText,
'email': email,
'date': date
});
Navigator.of(context).pop();
},
),
)
],
),
),
),
);
}
}
最適解かはわかりませんが、うまく動くのでエラーが出て困っていた方はこれでやってみると良いと思います。
Discussion