【Flutter】 Cloud Firestoreを使い特定のドキュメントのフィールドを取得したいです

Question

Cloud Firestoreを使い特定のドキュメントのフィールドを取得したいです

Flutterを始めて2週間ほどです。
自分で解決できなかったため、質問させていただきます。
Googleでも英語の記事を読んだりしたのですが、解決できなかったです。
![
コレクションにあるusersからドキュメントの[e-mail]を指定してフィールドのnameのhogehogeを取得しようとしています。

発生している問題・エラーメッセージ

The operator '[]' isn't defined for the type 'Future<DocumentSnapshot<Map<String, dynamic>>>'.
Try defining the operator '[]'.

該当のソースコード

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

class ProgramsWiget extends ConsumerWidget {
  const ProgramsWiget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    //watch(usernameProvider).state
    final documentStream = FirebaseFirestore.instance
        .collection('users')
        .doc('[e-mail]')
        .get();
    debugPrint(documentStream["name"])
    String nameStream = "ゲスト";

    //context.read(usernameProvider).state = nameStream.toString();
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('ようこそ ${documentStream["name"]} さん',
                style:
                    const TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            // ignore: unnecessary_string_interpolations
          ],
        ),
      ),
    );
  }
}

補足情報（FW/ツールのバージョンなど）

firebase_core: ^1.6.0
firebase_auth: ^3.1.1
cloud_firestore: ^2.5.3
provider: ^6.0.0
hooks_riverpod: ^0.14.0+4
flutter_hooks: ^0.17.0

Comments

[hoshi-takanori]

Flutter は使ったことありませんが、Firebase の結果は非同期で返ってくるので、非同期処理をする必要があるのでは？

[Takumi_pyg]

お答え頂いてありがとうございます。
全てのドキュメントを読み込む処理は、非同期処理を行はなくてもうまく実行できました。
documentStream["name"]で、取得できない事が困っています。色んな記事を見ても解決できなかったため質問させて頂いています。エラー文からは、取得の方法が間違っているという事は読み取れています。

[hoshi-takanori]

エラーメッセージの Future は非同期処理のことです。ちょっと調べてみましたが、FutureBuilder というのを使えば良さそうな気がします。
https://moimoiblog.com/programing/asynchronous-processing-widget/

Answer 1

まず、Scaffoldはページの土台です。StreamBuilderはWidgetを返しているに過ぎません。必ず、Scaffoldのbody内に設置しましょう。

次に、ConsumerWidget内では状態の変更ができません。
状態を変更する場合はChangeNotifier、つまりuser_model.dart内でappBarTitleを定める必要があります。

その際はvarを使わない方がいいです。理由はappBarTitleの型がdynamicになり、なんでも取れる状態になってしまいます。

この状態は少し危険で、appBarTitleの型がintになってしまっても、エディタの方でエラーが検知できず、実際にアプリをビルドして初めてエラーが起こり、「エディタの方でエラー出てないから、何が悪いのか分からない」という状況におちいってしまいます。

なので変数名の前に型を宣言しましょう。

（ちなみにsnapshot.data!.docs.mapの部分でMapのvalueをdynamicとして宣言しているのは、cloudFirestoreのMapのvalueはdynamicでないといけないという決まりがあるからです。なので、Webアプリを制作している方々はその不安定さが嫌いなので、FirebaseといったNoSQLを使わず、RDBを使っています。モバイルアプリの場合のデータベースはcloudFirestore一択なので、その欠点には目をつぶるしかありません）

あと、watch(UserProvider)をprogramWidgetModelと名付けるのはやめといた方がいいと思います。

program_widget.dartで複数のModelを読み込むことがあるからです。(滅多にないですが)

素直にuserModelでいいと思います。

上記のコードを見る限り質問者さんは一人を取得したいように感じます。

それならリアルタイム取得である必要はなく、一回の取得だけで良いです。

以上のことを考慮すると、コードは以下のようになります。

(FirebaseAuthを利用してのユーザ登録、そしてその際にusersにuidを含むDocumentをcloudFirestoreに追加することは省略しています。)

// user_model.dart
import 'package:flutter/material.dart';

import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final userProvider = ChangeNotifierProvider(
  (ref) => UserModel()
);

class UserModel extends ChangeNotifier {
  
  bool isLoading = false;
  String appBarTitle = '';
  User? currentUser;
  late DocumentSnapshot currentUserDoc;

  // watch(userProvider)が呼ばれた時に発火する
  UserModel() {
    init();
  }

  Future init() async {
    startLoading();
    setCurrentUser();
    await setCurrentUserDoc();
    endLoading();
  }

  void startLoading() {
    isLoading = true;
    // 変更をWidgetに通知する
    notifyListeners();
  }

  void setCurrentUser() {
    currentUser = FirebaseAuth.instance.currentUser;
  }

  void setAppBarTitle() {
    appBarTitle = currentUserDoc['name'];
  }
  void endLoading() {
    isLoading = false;
    // 変更をWidgetに通知する
    notifyListeners();
  }

  Future setCurrentUserDoc() async {
    try{
      await FirebaseFirestore.instance
      .collection('users')
      .where('uid',isEqualTo: currentUser!.uid)
      .limit(1)
      .get()
      .then((querySnapshot) {
        querySnapshot.docs.forEach((DocumentSnapshot documentSnapshot) {
          currentUserDoc = documentSnapshot;
        });
      });
    } catch(e) {
      print(e.toString());
    }
  }

}

// program_widget.dart
import 'package:flutter/material.dart';

import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'user_model.dart';

class ProgramWidget extends ConsumerWidget {

  const ProgramWidget({Key? key}) : super(key: key);
  Widget build(BuildContext context, ScopedReader watch) {
    final userModel = watch(userProvider);
    return userModel.isLoading ?
    Text('Loading')
    : Scaffold(
      appBar: AppBar(
        // 普通であればText(userModel.currentUserDoc['name'])で良い
        title: Text(
          'ようこそ' + userModel.appBarTitle + 'さん',
          style: const TextStyle(
            // 細かいけれどint型ではなく、double型であることがわかるように20ではなく20.0になっています
            fontSize: 20.0,
            fontWeight: FontWeight.bold
          ),
        ),
      ),
    );
  } 
}

Comments

[Takumi_pyg]

本当にありがとうございます。
nekoyamaさんに回答して頂いて感謝しています。
Flutterの基礎的な部分を学んだつもりでしたが、抜けていました。Modelファイルの書き方が特に参考になりました。

[nekoyama141592]

こちらこそ、お役に立てて何よりです！！

Answer 2

自分はhooks_riverpodの使い方が分からないので、flutter_riverpod(https://pub.dev/packages/flutter_riverpod)を使っての説明になります。

まず、ページを'program_widget.dart'と'program_widget_model.dart'の二つに分けてください。

// program_widget.dart
import 'package:flutter/material.dart';

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

import 'package:whisper/program_widget_model.dart';

class ProgramWidget extends ConsumerWidget {
  
  const ProgramWidget({
    Key? key
  }) : super(key: key);
  
  @override 
  Widget build(BuildContext context, ScopedReader watch) {
    final programWidgetModel = watch(programWidgetProvider);
    return StreamBuilder<QuerySnapshot>(
      stream: programWidgetModel.usersStream,
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) Text('something went wrong');
        if (snapshot.connectionState == ConnectionState.waiting) Text('Loading');
        return Center(
          child: ListView(
            children: snapshot.data!.docs.map((DocumentSnapshot document) {
            Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
              return Text(
                'ようこそ' + data['name'] + 'さん',
                style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold)
              );
            }).toList(),
          ),
        );
      }
    );
  }
}

/// program_widget_model.dart
import 'package:flutter/material.dart';

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

final programWidgetProvider = ChangeNotifierProvider(
  (ref) => ProgramWidgetModel()
);

class ProgramWidgetModel extends ChangeNotifier {
  
  final Stream<QuerySnapshot> usersStream = FirebaseFirestore.instance
  .collection('users')
  .where('email',isEqualTo: '[e-mail]')
  .limit(1)
  .snapshots();
}

こんな感じでしょうか。
質問者さんの意図を汲み取ると、複数名のゲストがいるのを考慮していると思われます。
そうしたことを実装したい場合、
program_widget_model.dartが次のようになります。

// program_widget_model.dart
import 'package:flutter/material.dart';

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

final programWidgetProvider = ChangeNotifierProvider(
  (ref) => ProgramWidgetModel()
);

class ProgramWidgetModel extends ChangeNotifier {
  // emailListを構成
  final List<String> emailList = []
  final Stream<QuerySnapshot> usersStream = FirebaseFirestore.instance
  .collection('users')
  .where('email',whereIn: emailList)
  .limit(1)
  .snapshots();
}

Comments

[Takumi_pyg]

ありがとうございます。私が、考えていた理想通りに動作しました。
質問なのですが、
final Stream<QuerySnapshot> usersStream = FirebaseFirestore.instance
.collection('users')
.where('email',whereIn: emailList)
.limit(1)
.snapshots();
上記のコードでは、全てのドキュメントからemailのカラムを照合しているのですがドキュメント名から取得することは可能でしょうか？

[nekoyama141592]

ごめんなさい。ドキュメント名が自分には何かわかりません。String型のドキュメントIDのことでしょうか。それとも、フィールド名(FirestoreにおけるRDBにおいての'カラム名')のことでしょうか。
それと、そのコードでは複数取得を目標にしているため.limit(1)は不要なコードでした。重ねてお詫び申し上げます。

[Takumi_pyg]

本当に詰まっているのでお助けして頂いて感謝しています。
String型のドキュメントIDの事です。画像上の[e-mail]のデータだけを取得する方法を教えて頂きたいです。もしよければ、参考にしたサイトも教えて頂きたいです。調べ方も参考にさせて頂きたいと思っているのでお願いします。

[nekoyama141592]

StreamBuilderのところで参考にしたのは( https://firebase.flutter.dev/docs/firestore/usage )です。これはpub.devのcloud_firestoreのUsageのところにリンクが貼ってあります。Firebase周りで困ったらpub.devのページをよく見て、他にヒントがないか探してみると良いでしょう。

調べ方のコツはGoogleの検索欄に日本語を入れないで検索してみることでしょうか。

すると、英語情報に当たるので、翻訳サイト(deepLとかGoogle翻訳とか)を積極的に使って解読しましょう。

自分も質問者さんと全く同じエラーにつっかかり、丸一日を解決に費やしたり、型をdynamic型に設定して、その不安定さゆえのエラーに何度も引っかかりました（笑）。

Answer 3

もう１つ質問があります。
教えて頂いたコードを応用してAppBarで取得した情報を表示したいと思っているのですが、更新ができないです。具体的には、下記のコードが実行されていないです。初歩的な質問だとは思うのですがお願いします。

            snapshot.data!.docs.map((DocumentSnapshot document) {
              Map<String, dynamic> data =
                  document.data()! as Map<String, dynamic>;
              appBarTitle = data["name"];
            });

全体コード

import 'package:flutter/material.dart';

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:sample/user/user_model.dart';

class ProgramWidget extends ConsumerWidget {
  const ProgramWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final programWidgetModel = watch(UserProvider);
    var appBarTitle = "ゲスト";
    return StreamBuilder<QuerySnapshot>(
        stream: programWidgetModel.usersStream,
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasError) return const CircularProgressIndicator();
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const CircularProgressIndicator();
          }
          if (snapshot.hasData) {
            snapshot.data!.docs.map((DocumentSnapshot document) {
              Map<String, dynamic> data =
                  document.data()! as Map<String, dynamic>;
              appBarTitle = data["name"];
            });
          }
          debugPrint("test2");
          return Scaffold(
              appBar: AppBar(
                  title: Text('ようこそ ' + appBarTitle + 'さん',
                      style: const TextStyle(
                          fontSize: 20, fontWeight: FontWeight.bold))));
        });
  }
}