Trying to wait for the Stream before displaying a widget

Question

I have a stream. But, I must wait until it has retrieved all the data from Firebase, before displaying the data on a Widget. I have modify my code and now I am getting the data in my widget. But the problem is that when I display again the view, my data appear several times. It is strange because I am cleaning the list to avoid that but it seems it is not efficient enough.

 if (snapshot.hasError) {
              return Text('Something went wrong');
              } else if (snapshot.hasData) {
              
                  if (snapshot.connectionState == ConnectionState.done)
                  {
                  for (int i=0;i<snapshot.data.docs.length;i++){
                  DocumentSnapshot snap = snapshot.data.docs[i];
                  _contexts.add(snap['context_Name']);}

                  } else {

                    return Center(child: CircularProgressIndicator());
                }
              }

              // return widgets and use data
              return Column(children:[

                TestWidgetContext(),

              ]); //MyHomePage())

body: Container(
        height: 250,
        child: Column(
          //mainAxisAlignment: MainAxisAlignment.center,
          children: [
            //FOR CONTEXT
            Flexible(child: StreamBuilder(
            stream:  FirebaseFirestore.instance
                .collection('Users')
                .doc(FirebaseAuth.instance.currentUser.uid)
                .collection('contexts')
                .snapshots(),
            builder: (BuildContext context,
            AsyncSnapshot<QuerySnapshot> snapshot) {

              if (snapshot.hasError) {
              return Text('Something went wrong');
              } 
              
              if (snapshot.hasData) {

                for (int i=0;i<snapshot.data.docs.length;i++){
                  DocumentSnapshot snap = snapshot.data.docs[i];
                  _contexts.add(snap['context_Name']);}

                return TestWidgetContext();

              // if connectionState is waiting
                  if (snapshot.connectionState == ConnectionState.waiting)
                  { return Text('Waiting');
                  } 

                    if (snapshot.connectionState == ConnectionState.none)
                    {return Text('None');}

                    if (snapshot.connectionState == ConnectionState.waiting)
                      {return Text('Waiting');}

                    if (snapshot.connectionState == ConnectionState.done)
                    {
                      for (int i=0;i<snapshot.data.docs.length;i++){
                        DocumentSnapshot snap = snapshot.data.docs[i];
                        _contexts.add(snap['context_Name']);}
                      return Text('Done');
                      }

                    /*else{
                      return Text(ConnectionState.values.toString());
                    }*/
              }

              // return widgets and use data
              return Text("SDDSQFQSDFDQSFSFDSQFQSF");SizedBox();
            })//TestWidgetContext() ;})

               // TestWidgetContext(),

    )] 
              
              )),


            /*Column(children:[

              TestWidgetContext(),

            ]*///), //MyHomePage())



      //bottomNavigationBar:  MyBottomAppBar(),  //PersistentBottomNavBar(),
    );
  }
  /*@override
  void initState(){
    super.initState();
  setState(() {
  });
  }*/
}

//##############################
Future class TestWidgetContext extends  StatefulWidget {

  TestWidgetContext({Key key})  : super(key: key);

  @override
  _TestWidgetContextState createState() => _TestWidgetContextState();
}

class _TestWidgetContextState extends State<TestWidgetContext> {
  List itemsContext;

  List<String> _selectedContext5 ;

  final _itemsContext = _contexts
      .map((context) => MultiSelectItem(context, context))
      .toList();

  @override
  void initState() {
    _selectedContext5 = _contexts;
    super.initState();
  }

  @override
  Widget build(BuildContext context)  {

    return Column(
      children: [
        MultiSelectBottomSheetField(
          buttonText: Text("Contexts"),
          onConfirm: (val2) {
            // _selectedAnimals5 = val2;
          },

          items: _itemsContext,
         // initialValue:
         // _itemsContext,
        ),
      ],
    );
  }
}

Solution

you can use snapshot.connectionState for the stream

      builder: (context, snapshot) {
        // if streame has some errors
        if (snapshot.hasError) {
          return Text('Somthing went wrong');
        } else if (snapshot.hasData) {
          // if connectionState is waiting
          if (snapshot.connectionState == ConnectionState.waiting) 
          {
            return Center(child: CircularProgressIndicator());
          }
           // return widgets and use data
          return Container(
             // child...   
           );
        } else {
           return Center(child: CircularProgressIndicator());
        }
      },

Comments

[Laurent Thomas]

Thank you. I have tried, but I still have the same problem. What I mean is that when I display my view a first time, the data are not displayed. I then close the view and display it again. The second time the data are displayed. I do not understand why.

[Laurent Thomas]

I have updated to code and find out that the query is never ending. I guess that this is probably why my widget is displaying nothing first.