Implement Search With FirestoreQueryBuilder FlutterFire [FireStore UI] - firebase

Question

i'm new with firebase and i try to Implement Search With FirestoreQueryBuilder FlutterFire [FireStore UI] , how i Implement it works but i want to know the right way, i'm not sure this is a right way or not how i did.
below this how i implement it, thank in advance :)
code example how i implemented:
...........................................................................................................................................
class ProductController {
final categoryCollection = FirebaseFirestore.instance.collection('category');
//Note: get data time and allow user for pagination
Query<ProductModel> searchProduct({required String? searchText}) {
return productCollection
.where('keySearch', arrayContains: searchText)
.withConverter<ProductModel>(
fromFirestore: (snapshot, _) {
Map<String, dynamic> _tempSnapShot = snapshot.data()!;
_tempSnapShot['id'] = snapshot.id;
return ProductModel.fromJson(_tempSnapShot);
},
toFirestore: (product, _) => product.toJson());
}
Query<ProductModel> getProduct() {
return productCollection.withConverter<ProductModel>(
fromFirestore: (snapshot, _) {
Map<String, dynamic> _tempSnapShot = snapshot.data()!;
_tempSnapShot['id'] = snapshot.id;
return ProductModel.fromJson(_tempSnapShot);
},
toFirestore: (product, _) => product.toJson());
}
}
class Product extends StatefulWidget {
const Product({Key? key}) : super(key: key);
#override
State<Product> createState() => _ProductState();
}
class _ProductState extends State<Product> {
String? searchText = '';
#override
Widget build(BuildContext context) {
return Column(
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: FormBuilderTextField(
name: 'search',
decoration: CustomDecoration.formFieldDecoration(label: 'Search'),
onChanged: (String? text) => setState(() {
searchText = text;
})),
),
Expanded(
child: FirestoreQueryBuilder<ProductModel>(
query: searchText!.isNotEmpty
? ProductController().searchProduct(searchText: searchText)
: ProductController().getProduct(),
builder: (context, snapshot, _) {
if (snapshot.isFetching) {
return const Align(
alignment: Alignment.bottomCenter,
child: CircularProgressIndicator());
} else if (snapshot.hasError) {
return Text('Error : ${snapshot.error.toString()}');
} else {
return ListView.builder(
shrinkWrap: true,
itemCount: snapshot.docs.length,
itemBuilder: ((context, index) {
ProductModel product = snapshot.docs[index].data();
// if we reached the end of the currently obtained items, we try to
final hasEndReached = snapshot.hasMore &&
index + 1 == snapshot.docs.length &&
!snapshot.isFetchingMore;
// obtain more items
if (hasEndReached) {
snapshot.fetchMore();
}
return ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(product.images != null
? product.images![0].filePath!
: 'https://images.assetsdelivery.com/compings_v2/yehorlisnyi/yehorlisnyi2104/yehorlisnyi210400016.jpg'),
),
title: Text('${product.name} (${product.price} \$)'),
subtitle: Text('Expire Date : '
'${DateFormat('dd/MM/yyyy').format(product.expireDate)}'),
trailing: Wrap(
children: [
IconButton(
onPressed: () => Navigator.pushNamed(
context, route.editProductScreen,
arguments: product),
color: Colors.orangeAccent,
icon: const Icon(Icons.edit),
),
IconButton(
onPressed: () {
if (product.images != null) {
FireBaseStorageMethods()
.removeImage(
images: product.images!,
context: context)
.whenComplete(
() => ProductController()
.removeProduct(
id: product.id!,
context: context),
);
} else {
ProductController().removeProduct(
id: product.id!, context: context);
}
},
color: Colors.redAccent,
icon: const Icon(Icons.delete),
)
],
),
);
}),
);
}
})
),
],
);
}