如何在颤动中将获取 Firestore 数据设置为下拉菜单

Question

我需要将我的 Firestore 数据设置到下拉菜单中。 但是当我尝试这样做时，我得到了一个像这样的下拉菜单。

如何将我的抓取数据正确设置到下拉菜单中。

这是我的代码...？

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(),
          ),
        );
      },
    );
  }
}

编辑后 -

Answer 1

您正在为每个文档创建一个DropdownSearch 小部件。相反，您应该创建一个 DropdownSearch 小部件，所有文档都在 items 属性中。

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,
  ),
);