Firestoreのデータを使ったListview.builderが更新されない

Question

自作アプリで、Firestoreのデータを用いてListviewを表示させたいです。

メインページからこちらのページに飛んでくるのですが、
イニシャライザでgetRecipeList()を使ってFirestoreからデータをgetDataMapListに取得し、
これを用いてListview.builderを作っています。
データにはレシピ名とその属性（name、category、flavor)をもっています。

一度はできていたのですが、別の機能（絞り込み）を実装しようとしている中で、
上手く動かなくなり、どこがおかしいのかわからなくなってしまいました。

ページに入った際はうまくリストが出ないのですが、
ホットリロードをすると表示されます。
また、イニシャライザの書き方がよくないのかと思い、
一番下にボタンでgetRecipeList();を起動するものも用意してみましたが、これもダメでした。

関係ない部分も多く含んでしまっており、読みにくいかと思いますが、
どなたかご指導いただけると幸いです。

class RecipeAdd extends StatefulWidget {
   const RecipeAdd({Key? key}) : super(key: key);
  @override
  State<RecipeAdd> createState() => _RecipeAddState();
}

class _RecipeAddState extends State<RecipeAdd> {

  _RecipeAddState(){
    getRecipeList();
  }

  Future <void> getRecipeList()async{
    getDataMapList=[];
    final colRef = db.collection("recipe");
    var querySnapshot = await colRef.get(); // QuerySnapshot
    var queryDocSnapshot = querySnapshot.docs; // List<QueryDocumentSnapshot>
    for (final snapshot in queryDocSnapshot) {
      final data = snapshot.data(); // 
      try {
        getDataMapList.add(data);
      }
      catch(e){
        print("Error completing: $e");
      }
    }
  }
String _addMenu ='';
  int _selectedIndex = -1;
  List getDataMapList= [];
  
  @override
  Widget build(BuildContext context) {
    var addSite = ModalRoute.of(context)?.settings.arguments;
    bool selectedCheck = false;
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text("$addSiteのメニュー"),
            SizedBox( height: 400, width: 350,
              child: ListView.builder(
                itemCount: getDataMapList.length,
                itemBuilder: (BuildContext context, int index) {
                  String _flavorText="";
                  for ( String flavor in getDataMapList[index]["flavor"]){
                    _flavorText += flavor + "," ;
                  }
                  IconData? _catIcon;
                  if( getDataMapList[index]["category"]=="肉"){
                    _catIcon = Icons.kebab_dining;
                  }
                  else if (getDataMapList[index]["category"]=="魚"){
                    _catIcon = Icons.directions_boat_filled;
                  }
                  else{
                    _catIcon = Icons.local_dining;
                  }
                  return Card(
                    child:ListTile(
                      leading: Icon(_catIcon),
                      title: Text(getDataMapList[index]["name"]),
                      selected: _selectedIndex == index ? true:false,
                      selectedTileColor: Colors.cyan.withOpacity(0.2),
                      subtitle: Text("tag: $_flavorText",style: TextStyle(fontSize: 12),),
                      onTap: (){
                        setState(() {
                          _addMenu = getDataMapList[index]["name"];
                          _selectedIndex = index;
                        });
                      },
                    ),
                  );
                },
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () => getRecipeList(),
                  child: Icon(Icons.search),
                ),
                Card(
                  child: Text("絞り込み項目"),
                )
              ],
            ),
            Container(
              width: 200, height: 80,
              child: ElevatedButton(
                  onPressed: () {
                    Navigator.pop(context, _addMenu);
                    },
                  child: Text("$_addMenu\nにする!",style: TextStyle(fontSize: 20),
                  ),
                  style: ElevatedButton.styleFrom(primary: Colors.deepOrange)
              ),
            ),
            ElevatedButton(
              style:  ElevatedButton.styleFrom(primary: Colors.lightGreen),
              onPressed:(){
                Navigator.of(context).pushNamed("/NewRecipe")
                   .then((value) => {
                    if (value!=null){
                    Navigator.pop(context, value)}
                   });
                },
              child: Text("新しいメニュー"),
            ),
            ElevatedButton(
                onPressed: (){
                  setState(() {
                    getRecipeList();
                  });
                  },
                child: Text("手動ロード")
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

非同期でgetDataMapListを生成しているので、ListView.builderで表示する前までにデータがそろっていないのが原因でしょう。

非同期でデータを収集しその結果を表示する場合にはFutureBuilderを使うのが定石です。
データが少なく関数の時間が小さいのであれば、awaitを入れて同期するというやり方もありだと思いますが、今回コンストラクタ及び手動ロード側のsetState内の匿名関数では非同期関数の同期ができないので無理だとは思いますが。

FutureBuilderを使う場合には以下の様にします。

配置場所としては、ListView.builderの上にListView.builderをラップする形のがいいのかな。
FutureBuilderのfutureタグにはgetRecipeListを。
データ収取が完了したかどうかは、関数がFuture<void>なので、snapshot.connectionState == ConnectionState.done && !snapshot.hasErrorが良いと思います。
Future <List>的なリターンに変更するのであれば、snapshot.hasDataだけでいいとは思います。

また更新処理のためgetRecipeListを呼び出している箇所は、それを外す。
コンストラクタ部分と手動ロード部分。

注意点としては、buildが呼び出されるようなケースでは毎回getRecipeListが呼び出されます。
getDataMapListを更新したくない場合は、意図的にフラグなんかを用意し更新しないようなif文をgetRecipeListに入れるのがいいと思う。
ケースとしては、ListTileのonTapあたりかな。

Comments

[nugio.kutusita]

ありがとうございます。
ご指摘の通りだったようで、FutureBuilderによって表示されるようになりました。

ただ、Listtileの選択時に毎回リストの再生成がかかってしまい、うまく回避できません。
提案いただいたように、boolのフラグ変数を一つ用意して、ListTileのonTapにてフラグ＝falseとしました。
getRecipeList関数内で、すべての処理をif文で囲み、フラグ＝trueでのみ更新するようにしています。

これでリスト内容（項目）は更新されないようになったのですが、リストカード自体は再生成されますので、
スクロールして下のほうのカードを選択した際、再生成されてスクロールが一番上に戻る＝選択したカードが隠れてしまう　という問題が発生します。

再生成自体を防止する処理は難しいでしょうか。

[ta.fu]

全く難しくはないです。
「何をやったらどこまで再作成をさせるのか」をまず考えます。
そして再作成を行う個所をStatefulWidgetやStatefulBuilder系の状態管理ウィジェットでラップし局所化します。
これにより再構築するウィジェットを制御できます。
今回のソースだと更新単位が全部なので全部更新するという動きをしているだけです。

修正方針としては、上の例で言うと、ListTile.onTapをすると_addMenuと_selectedIndexを変更し、これに関するウィジェットの状態変更をしようとしています。
それに関連するのは、個々のListTileとElevatedButtonなのでそれを再構築させることにします。
なお、StatefulWidgetやStatefulBuilderは内側のsetStateで更新をするため、外側から更新させるには他の状態管理用のウィジェットを使う方がいいと思います。
（更新対象をStatefulBuilderでラップし、そのsetStateを別に取り出して管理しておいて更新対象のウィジェットのsetStateを呼び出す、という荒業でやってやれないことはないですが。）

私はGetXというパッケージの状態管理を使ってます。
それを使うことで変数の変更により、関連付けしているウィジェットを再構築してくれるので結構便利に使っています。
今回のケースだと、_addMenuとElevatedButton、_selectedIndexをちょっと変更し、ListTile単位に選択状態かそうでないかのboolを個別に持ちそれに関連づけることで、選択・非選択になったListTileのみ再構築させることもできます。
ここらあたりに関しては負の面としてオブジェクト数が多くなったりし、メモリや速度など総合的に判断してどのような設計とするのか考えていかないといけないです。

[nugio.kutusita]

ありがとうございます。
正直、少々複雑すぎて理解が追いつかないです。
結局、FutureBuilderを使うとできないということでしょうか。

そもそも最初、これを使わずに出来ていた要因もよくわからず…
絞り込み検索の実装もうまく行っていません。
立ち上げ時や絞り込み検索など、任意タイミングでのみ、非同期でデータ取得を待ってからListView.builderが動くようにしたいのですが…

StreamBuilderというものもあるようですが、こちらは差分のみ更新する性質であるということで、
これを使ったほうがよいのでしょうか。

[ta.fu]

FutureBuilderを使うとできない、ではなく、先に書いた「何をやったらどこまで再作成をさせるのか」を考え、それを元にウィジェット構成を考え、ウィジェットクラスに落とし込んでいくことが必要です。
今回のも状態管理パッケージを使い、ListTileとElevatedButtonの上に、状態管理と連携したビルダーでラップすればできます。

StreamBuilderはStreamで「受け取る」という状態を監視して変化があればbuilderを呼び出してくれるというもので、その基本的な考えはFutureBuilderと同じです。FutureBuilderはFutureの状態を監視して変化があったらbuilderを呼び出すものです。
Streamという仕組み上、他の場所からStreamに情報を与えれば、それを基点にStreamBuilderのbuilderが動きますが、今回のケースでは使えないのではと思います。

ちなみにこのウィジェットの更新に関してFlutterを使い始めた時は理解に苦しむものでしたが、試行錯誤してアプリを作成するうち1か月ほどでとりあえず納得できる状態には行きました。

Face to faceでサンプルを用いて授業みたいなものを受ければ1～2日である程度理解できるものだと思いますが、Web上のザッピングされた情報や知識人にリアルタイムに質疑が行えない環境だと納得できるまで結構時間がかかるんじゃないかと思います。
頑張ってください。

[nugio.kutusita]

回答遅くなりましたが、諸々学習を進めています。

状態をどのように渡すかという部分で、futurebuilderやstreambuilderの他、changenotifierとproviderを使う方法があることなど。

firebaseからデータを引っ張る段階で絞り込み機能をつけたいので、色々な関数からリストに変化を与えたいという点でstreambuilderかchangenotiifierの方向がいいのかなとか、考えています。

改めて今読むと、上でコメントいただいた内容も理解できました。ありがとうございました。