CODEWITHSUNDEEP
firebasegoogle-cloud-firestoreflutterdropdown
GroovinChip
GroovinChip

Reputation: 375

Flutter cloud_firestore: How can I add documents from a collection into a DropdownButton?

Here's the code I have for my DropdownButton currently:

    new StreamBuilder<QuerySnapshot>(
        stream: Firestore.instance.collection("Teams").snapshots(),
        builder: (context, snapshot){
        var length = snapshot.data.documents.length;
        DocumentSnapshot ds = snapshot.data.documents[length];
        return new DropdownButton(
           items: <DropdownMenuItem>[
              new DropdownMenuItem(child: new Text(""))
           ],
        onChanged: _chooseTeam,
        hint: new Text("Join a Team"),
        value: team
       );
   }
),

I can't figure out how to dynamically add the collections to the List of DropDownButtonItems. HOw can I do this?

Upvotes: 1

Views: 1999

Answers (3)

Wisnu Saputra
Wisnu Saputra

Reputation: 101

var category;    
StreamBuilder(
    stream: Firestore.instance.collection('category').snapshots(),
    builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
      if (!snapshot.hasData)
        Center(
          child: const CupertinoActivityIndicator(),
        );
      return DropdownButton<String>(
        value: category,
        isDense: true,
        hint: Text('Category'),
        onChanged: (newValue) {
          setState(() {
            category = newValue;
          });
        },
        items: snapshot.data != null
            ? snapshot.data.documents
                .map((DocumentSnapshot document) {
                return new DropdownMenuItem<String>(
                    value: document.data['name'].toString(),
                    child: new Container(
                      height: 100.0,
                      //color: primaryColor,
                      child: new Text(
                        document.data['name'].toString(),
                      ),
                    ));
              }).toList()
            : DropdownMenuItem(
                value: 'null',
                child: new Container(
                  height: 100.0,
                  child: new Text('null'),
                ),
              ),
      );
    }),

this example hopefully helps

Upvotes: 3

creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126734

The items argument takes a List<DropdownMenuItem>, which also means that you could map your List<DocumentSnapshot>.

return DropdownButton(
       items: snapshot.data.documents.map((DocumentSnapshot document) {
          // I do not know what fields you want to access, thus I am fetching "field"
          return DropdownMenuItem(child: Text(document.documentID)}),           
)

Upvotes: 1

GroovinChip
GroovinChip

Reputation: 375

I got it:

                      new StreamBuilder<QuerySnapshot>(
                        stream: Firestore.instance.collection("Teams").snapshots(),
                        builder: (context, snapshot){
                         var length = snapshot.data.documents.length;
                         DocumentSnapshot ds = snapshot.data.documents[length - 1];
                         return new DropdownButton(
                           items: snapshot.data.documents.map((DocumentSnapshot document) {
                             return DropdownMenuItem(child: new Text(document.documentID));
                           }).toList(),
                           onChanged: _chooseTeam,
                           hint: new Text("Join a Team"),
                           value: team
                         );
                        }
                      ),

I had to set the length to - 1, and get the document ID as the text. I also had to call toList() on the map

Upvotes: 0

Related Questions