flutter firebase collection显示在文本框中，如下拉菜单

Question

我在firebase中有一个集合，我希望其中的文档在单击文本字段时显示在文本字段中。我怎么做像下拉菜单?

Answer 1

列出你想要使用的所有数据:

QuerySnapshot feed = await FirebaseFirestore.instance
.collection(email)
.get();
dataList = [];
for (var element in feed.docs) {
dataList.add(element['title']);
}

一旦你得到了一个列表的形式，只需将该列表插入到你想要的下拉列表中:

String dropDownValue = "Select Item"; //assign a variable to store the selection
DropdownButton(
value: dropDownValue,

icon: const Icon(Icons.keyboard_arrow_down),   

items: dataList.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
});
},
),

对于TextField，您可以在点击onTap方法时使用FutureBuilder:

TextEditingController textEditingController = TextEditingController();
FutureBuilder(builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) { 
return Stack(
children: [TextField(
onTap: (){
setState(() {
showDropdown = true;
});
},
controller: textEditingController(),
),
showDropdown ? DropdownButton(
value: dropDownValue,
icon: const Icon(Icons.keyboard_arrow_down),
items: dataList.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
textEditingController.text.value = newValue!;
});
},
) : Container(),
]
)
},)