Flutter: Implementing firestore search in floating search appbar - firebase

Question

I have a collection 'all' in which I have docs, I each doc I have 2 fields id and name, I want that when the user enters the id or the name it should show suggestions. I want to implement this firestore search in this package material_floating_search_bar > I tried but couldn't figure out how to merge these 2.
floating search bar code: //got from package example
how to implement firestore in this:
Widget buildFloatingSearchBar() {
final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
return FloatingSearchBar(
hint: 'Search...',
scrollPadding: const EdgeInsets.only(top: 16, bottom: 56),
transitionDuration: const Duration(milliseconds: 800),
transitionCurve: Curves.easeInOut,
physics: const BouncingScrollPhysics(),
axisAlignment: isPortrait ? 0.0 : -1.0,
openAxisAlignment: 0.0,
width: isPortrait ? 600 : 500,
debounceDelay: const Duration(milliseconds: 500),
onQueryChanged: (query) {
// Call your model, bloc, controller here.
},
transition: CircularFloatingSearchBarTransition(),
actions: [
FloatingSearchBarAction(
showIfOpened: false,
child: CircularButton(
icon: const Icon(Icons.place),
onPressed: () {},
),
),
FloatingSearchBarAction.searchToClear(
showIfClosed: false,
),
],
builder: (context, transition) {
return ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Material(
color: Colors.white,
elevation: 4.0,
child: Column(
mainAxisSize: MainAxisSize.min,
children: Colors.accents.map((color) {
return Container(height: 112, color: color);
}).toList(),
),
),
);
},
);
}

Answer 1

Not sure if this is the best way to implement this functionality
1. Get reference of your collection (getColl is variable name and 'All' your collection name).
final CollectionReference getColl = FirebaseFirestore.instance.collection('All');
2. Get QuerySnapshot of your collection in a List ( _getDataFromSnapshot, GetData , dbData names can be changed)
List<GetData> _getDataFromSnapshot(QuerySnapshot snapshot) {
return snapshot.docs.map((doc) {
return GetData(
id: doc.get('id') ?? '',
name: doc.get('name') ?? '',
);
}).toList();
}
Stream<List<GetData>> get dbData {
return getColl.snapshots().map(_getDataFromSnapshot);
}
class GetData { final String id,name; GetData({this.id, this.name}) }
3. Do this where you want your search bar
Widget build (BuildContext context {
var datalist = Provider.of<List<GetData>>(context);
// Filter condition.
datalist = datalist.where((_search) {
return _search.id.toLowerCase().contains(key) ||
_search.name.toString().toLowerCase().contains(key);
}).toList();
Then implement your search bar and set onChanged
onChanged: (value) {
// Update the key when the value changes.
setState(() => key = value.toLowerCase());
},
}