Flutter Streambuilder returning loop

Question

I have data from my firebase and to simplify my code I would like to return a loop of all elements. Here is my Streambuilder:

Column(
      children: <Widget>[
        Container(
          height: 300,
          width: double.infinity,
          child: Image.network(
            widget.image,
            fit: BoxFit.cover,
          ),
        ),
        StreamBuilder(
            stream: FirebaseFirestore.instance
                .collection(
                    '/towns/${widget.townId}/beacons/${widget.beaconId}/content')
                .snapshots(),
            builder: (ctx, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting)
                return CircularProgressIndicator();
              final contents = snapshot.data.docs;
              for (int i = 1; i <= 10; i++) {
                return Column(
                  children: [
                    contents[1]['sectionTitle$i'].isNotEmpty
                        ? buildSectionTitle(
                            context, contents[1]['sectionTitle$i'])
                        : Container(),
                    contents[1]['text$i'].isNotEmpty
                        ? buildText(context, contents[1]['text$i'])
                        : Container(),
                    contents[1]['audio$i'].isNotEmpty
                        ? Audio(contents[1]['audio$i'], key: UniqueKey())
                        : Container(),
                    contents[1]['image$i'].isNotEmpty
                        ? buildImage(context, contents[1]['image$i'])
                        : Container(),
                  ],
                );
              }
              return Container();
            }),
      ],
    ),

In my firebase, I have all the elements (sectionTitle1, sectionTitle2, etc.) are on the same document (here contents[1]). The problem is the Streambuild only returns the firsts elements of my loop. For example, if I start to i = 1, the loop will return sectionTitle1, text1, audio1 and image1 ; if I start to i = 3, the loop will return sectionTitle3, text3, audio3 and image3. How can I return everythings ?

Solution

Updated answer

You could try this way, it may solve your issue:

return Column(
  children: [
    for (int i = 1; i <= 10; i++) ...[
      contents[1]['sectionTitle$i'].isNotEmpty
        ? buildSectionTitle(
          context, contents[1]['sectionTitle$i'])
        : Container(),
      contents[1]['text$i'].isNotEmpty
        ? buildText(context, contents[1]['text$i'])
        : Container(),
      contents[1]['audio$i'].isNotEmpty
        ? Audio(contents[1]['audio$i'], key: UniqueKey())
        : Container(),
      contents[1]['image$i'].isNotEmpty
        ? buildImage(context, contents[1]['image$i'])
        : Container(),
    ]
  ]
);

This way you won't have to create a Column for each iteration. and also remove the return Container(); at the end

Previous wrong answer

you are using content[1] instead of content[i] so you will always have the result of docs[1] in your loop

Comments

[Randal Schwartz]

Don't create the stream in the parameter to StreamBuilder! You'll get a restarted stream every single build() call, and burn up your free tier pretty fast. :)

[johnsmith2020]

Hi Arnaud, all the elements (sectionTitle1, text3, image7, etc.) are in the same document. Here is just the document number 1.

[Arnaud Delubac]

oh! my bad, i've read too fast your question, i am editing the answer

[johnsmith2020]

It's working very well, thank a lot Arnaud. I didn't know it was possible to put the loop inside the Column(). With "..." it's working very well so I have one last question: What's mean "..." in front of the function ?

[Arnaud Delubac]

it's called Spread operator, here is the doc: dart.dev/guides/language/language-tour#spread-operator