CODEWITHSUNDEEP
firebasefluttergoogle-cloud-firestore
Zenixo
Zenixo

Reputation: 877

How to set fetch Firestore data into dropdown menu in flutter

I need to set my Firestore data into the drop-down menu. But When I trying to do this, I got a drop don menu like this.

I got a drop don menu like this

How to set my fetch data into the drop-down menu correctly.

This is my code...?

class _DropDownState extends State<DropDown> {
  final Stream<QuerySnapshot> _cupCakeStream = FirebaseFirestore.instance
      .collection('cupcake')
      .snapshots(includeMetadataChanges: true);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: _cupCakeStream,
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Text("Loading");
        }
        return Container(
          child: ListView(
            shrinkWrap: true,
            children: snapshot.data!.docs.map((DocumentSnapshot document) {
              Map<String, dynamic> data =
                  document.data()! as Map<String, dynamic>;
              return DropdownSearch<String>(
                  mode: Mode.MENU,
                  showSelectedItems: true,
                  items: [data["cupcake_name"]],
                  label: "Select  Category",
                  popupItemDisabled: (String s) => s.startsWith('I'),
                  onChanged: print,
              );
            }).toList(),
          ),
        );
      },
    );
  }
}

After Edit - Have this kind of Error

Upvotes: 0

Views: 2827

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 599051

You're creating a DropdownSearch widget for each document. Instead you should create a single DropdownSearch widget, with all documents in the items property.

return Container(
  child: DropdownSearch<String>(
      mode: Mode.MENU,
      showSelectedItems: true,
      items: snapshot.data!.docs.map((DocumentSnapshot document) {
          Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
          return data["cupcake_name"];
      }).toList().cast<String>(),
      label: "Select  Category",
      popupItemDisabled: (String s) => s.startsWith('I'),
      onChanged: print,
  ),
);

Upvotes: 2

Related Questions