how i can create list from firestore data - flutter

Question

i want to create list from firestore data
to add suggestions/autocomplete in text field, any help please?
example list:
static final List<String> commodity = [
'Banana',
'Mango',
'Orange',
];
wanted list from firestore:
static getSuggestion(String suggestion) async =>
await FirebaseFirestore.instance
.collection("QFS")
.where('commodity', isEqualTo: suggestion)
.get()
.then((snap) {
return snap.docs;
});
}
my whole code:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
class MyApp extends StatefulWidget {
MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
var _selectedCommodity1;
var _selectedCommodity2;
TextEditingController commodityFiled1 = TextEditingController();
TextEditingController commodityFiled2 = TextEditingController();
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text("QFS"),
),
body: Form(
child: Container(
padding: const EdgeInsets.only(
top: 5, bottom: 10, right: 20, left: 20),
child: Column(children: [
TypeAheadFormField(
textFieldConfiguration: TextFieldConfiguration(
controller: commodityFiled1,
decoration: const InputDecoration(
labelText: 'Commodity1',
icon: Icon(
Icons.receipt_rounded,
color: Colors.black87,
))),
suggestionsCallback: (pattern) {
return CommodityService.getSuggestions(pattern);
},
itemBuilder: (context, String suggestion) {
return ListTile(
title: Text(suggestion),
);
},
transitionBuilder:
(context, suggestionsBox, controller) {
return suggestionsBox;
},
onSuggestionSelected: (String suggestion) {
commodityFiled1.text = suggestion;
},
onSaved: (value) => _selectedCommodity1 = value!,
),
TypeAheadFormField(
textFieldConfiguration: TextFieldConfiguration(
controller: commodityFiled2,
decoration: const InputDecoration(
labelText: 'Commodity2',
icon: Icon(
Icons.receipt_rounded,
color: Colors.black87,
))),
suggestionsCallback: (pattern) {
return getSuggestion(pattern);
},
itemBuilder: (context, dynamic suggestion) {
return ListTile(
title: Text(suggestion),
);
},
transitionBuilder:
(context, suggestionsBox, controller) {
return suggestionsBox;
},
onSuggestionSelected: (dynamic suggestion) {
commodityFiled2.text = suggestion;
},
onSaved: (value) => _selectedCommodity2 = value!,
),
])))));
}
static getSuggestion(String suggestion) async =>
await FirebaseFirestore.instance
.collection("QFS")
.where('commodity', isEqualTo: suggestion)
.get()
.then((snap) {
return snap.docs;
});
}
class CommodityService {
static final List<String> commodity = [
'Banana',
'Mango',
'Orange',
];
static List<String> getSuggestions(String query) {
List<String> matches = [];
matches.addAll(commodity);
matches.retainWhere((s) => s.toLowerCase().contains(query.toLowerCase()));
return matches;
}
}

Answer 1

Clarification: From my understanding, you have documents in your collection that each of them has the property commodity (type String) and you want to fetch only the document that has a specific commodity.
Open your Google Firestore Database dashboard and check which types you can have the documents of your collection.
Click Add document to check the types.
Check the Firestore docs.
Inside snapshot.data, there's docs (every document of your collection).
The code is from docs:
#override
Widget build(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: _usersStream,
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Something went wrong');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return Text("Loading");
}
return ListView(
children: snapshot.data!.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
return ListTile(
title: Text(data['full_name']),
subtitle: Text(data['company']),
);
}).toList(),
);
},
);
}
The code above shows how to convert every document (type DocumentSnapshot) to a JSON format (that can be represented with Map<String, dynamic>). To access to your field commodity (type String), put this data['commodity']. For doc id, you'll need access with document.id, because it isn't inside the document.data() method.
Then on suggestionCallback (I read TypeAheadField of flutter_typeahead API, you have to return to it a List (it's an Iterable) of some type (like List<String>).
I never tried this Flutter package before, but I would edit getSuggestion():
static Future<List<String>> getSuggestion(String suggestion) async =>
return await FirebaseFirestore.instance
.collection("QFS")
.where('commodity', isEqualTo: suggestion)
.get()
.then((snap) {
final docs = snap.data!.docs;
return docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
return data['<fieldname of your document, e.g., "country" or "commodity"'];
}).toList(),
});
Write your solution on comments section.