前回firebase_authを使えるところまできたので、今回は変更後(breaking change)のバージョンのCloud Firestoreを使っていきます。
前回作ったbc_ffプロジェクトでやっていきます。
まず依存関係のコードをpubspec.yamlに追加します。
pubspec.yaml
dependencies: flutter: sdk: flutter firebase_auth: ^0.18.1+2 google_sign_in: ^4.5.1 flutter_signin_button: ^1.0.0 cloud_firestore: ^0.14.1+3 #←追加
現時点での最新バージョンを追加します。
https://firebase.flutter.dev/docs/firestore/usage#collections–documents
本来ファイルを分けて別画面(ウィジェット)作るのが普通ですが、動くかどうかのテストなのでmain.dartに追加します(笑)
main.dart
import 'package:firebase_core/firebase_core.dart'; import 'package:flutter/material.dart'; import 'package:flutter_signin_button/button_builder.dart'; import './register_page.dart'; import './signin_page.dart'; import 'package:cloud_firestore/cloud_firestore.dart'; Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); runApp(AuthExampleApp()); } /// The entry point of the application. /// /// Returns a [MaterialApp]. class AuthExampleApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Firebase Example App', theme: ThemeData.dark(), home: Scaffold( body: AuthTypeSelector(), )); } } /// Provides a UI to select a authentication type page class AuthTypeSelector extends StatelessWidget { // Navigates to a new page void _pushPage(BuildContext context, Widget page) { Navigator.of(context).push( MaterialPageRoute<void>(builder: (_) => page), ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Firebase Example App"), ), body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Container( child: SignInButtonBuilder( icon: Icons.person_add, backgroundColor: Colors.indigo, text: 'Registration', onPressed: () => _pushPage(context, RegisterPage()), ), padding: const EdgeInsets.all(16), alignment: Alignment.center, ), Container( child: SignInButtonBuilder( icon: Icons.verified_user, backgroundColor: Colors.orange, text: 'Sign In', onPressed: () => _pushPage(context, SignInPage()), ), padding: const EdgeInsets.all(16), alignment: Alignment.center, ), AddUser('Test Tarou','TesTes.inc',20), //←追加 ], ), ); } } //https://firebase.flutter.dev/docs/firestore/usage#collections--documents class AddUser extends StatelessWidget { final String fullName; final String company; final int age; AddUser(this.fullName, this.company, this.age); @override Widget build(BuildContext context) { // Create a CollectionReference called users that references the firestore collection CollectionReference users = FirebaseFirestore.instance.collection('users'); Future<void> addUser() { // Call the user's CollectionReference to add a new user return users .add({ 'full_name': fullName, // John Doe 'company': company, // Stokes and Sons 'age': age // 42 }) .then((value) => print("User Added")) .catchError((error) => print("Failed to add user: $error")); } return FlatButton( color:Colors.yellow, onPressed: addUser, child: Text( "Add User", ), ); } }
実行する前に、FirebaseコンソールでFirestoreのデータベースを作成します。
「データベースの作成」ボタンを押します。
テストモードを選択して「次へ」を押します。
ロケーションを選択します。
練習ならasianortheast1〜3のどこでもいいんですが、リリースするつもりなら、リリースしたアプリが主に使用される場所を選択してください。
ここで選んだロケーションは変更できないようなので、よく考えて選びましょう。ただそこまで重要ということでもないです。
実行ボタンを押して実行します。
黄色の「Add User」ボタンを押すと、
初めて押した時は、自動的に’users’コレクションが生成されました。今回は、
AddUser('Test Tarou','TesTes.inc',20),
としているので、ボタンを押した回数だけ全く同じ内容のドキュメントがfirestoreのデータベースに追加されます。
実際追加されています。
とりあえずこれでfirestoreを使えているので、あとは
https://firebase.flutter.dev/docs/firestore/usage
新しいドキュメントを見て使い方を学んでいきます。