How do I add a Search option in a StreamBuilder in Flutter? - flutter

Question

I have successfully created a stream builder in Flutter and the data flow is perfect. Now I need to add a search option in the Stream Builder in order to search for the particular product using the product name.
Actually, I have created a search bar in the body section but I don't have any Idea to write the logic to implement the search option. It would be great if someone helps me to create a search option.
Here is the code:
class DashboardPage extends StatefulWidget {
#override
_DashboardPageState createState() => _DashboardPageState();
}
class _DashboardPageState extends State<DashboardPage> {
final _firestore = FirebaseFirestore.instance;
void _logOut() {
final _auth = FirebaseAuth.instance;
_auth.signOut().then((value){
Navigator.pushReplacementNamed(context, '/login');
});
}
Widget _searchBar(){
return Padding(
padding: const EdgeInsets.all(10.0),
child: TextField(
decoration: InputDecoration(
hintText: "Search...",
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dashboard"),
centerTitle: true,
actions: [
IconButton(icon: Icon(Icons.logout), onPressed: (){
_logOut();
},)
],
),
body: Container(
child: Center(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children:[
_searchBar(),
StreamBuilder<QuerySnapshot>(
stream: _firestore.collection("products").snapshots(),
builder: (context, snapshot){
if (!snapshot.hasData){
return Center(
child: CircularProgressIndicator(
backgroundColor: Theme.of(context).accentColor,
),
);
}
final products = snapshot.data.docs;
List<ProductFeed> productFeeds = [];
for(var product in products){
final productName = product.data()['Product Name'];
final productCategory = product.data()['Product Category'];
final productDescription = product.data()['Product Description'];
final productFeed = ProductFeed(
productName: productName,
productCategory: productCategory,
productDescription: productDescription,
);
productFeeds.add(productFeed);
}
return Column(children: productFeeds);
})
],
),
),
),
),
);
}
}
class ProductFeed extends StatelessWidget {
ProductFeed({this.productName, this.productCategory, this.productDescription});
final String productName;
final String productCategory;
final String productDescription;
#override
Widget build(BuildContext context) {
return Container(
color: Color(0xFFfae8df),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: GestureDetector(
child: Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
color: Theme.of(context).accentColor,
child: Padding(
padding: const EdgeInsets.only(top: 10.0, left: 10.0),
child: Text(
'$productName',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w800,
color: Colors.white),
),
),
),
Container(
color: Theme.of(context).accentColor,
child: Padding(
padding: const EdgeInsets.only(top: 5.0, left: 10.0, bottom: 10.0),
child: Text(
'Category: $productCategory',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w500,
color: Colors.white),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0, left: 10.0),
child: Text(
'$productDescription',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w500,
color: Colors.grey.shade800),
),
),
SizedBox(
height: 20.0,
),
],
),
),
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SingleProductFeedPage(
productName: productName,
productCategory: productCategory,
productDescription: productDescription,
),
),
);
},
),
),
);
}
}