How to show List From firestore in textformfield? - flutter

Question

I want to show List of a item name from using stream builder in firestore database when textform field is focus and when it is not focus it show Cards as I will provide below the code. Please give proper solution to solve issue
appBar: AppBar(
title: Container(
height: 40,
child: Stack(
children: [
TextFormField(
keyboardType: TextInputType.text,
autofocus: false,
controller: searchcontroller,
focusNode: fousnode,
decoration: InputDecoration(
hintText: "Search Product",
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(11)),
),
),
onTap: (){
},
)
],
),
),
backgroundColor: Colors.grey,
actions: [
IconButton(onPressed: (){
fousnode.requestFocus();
}, icon: Icon(Icons.search))
],
body: SingleChildScrollView(
child: Column(
children: [
SizedBox(height: 15,),
StreamBuilder(
stream: FirebaseFirestore.instance.collectionGroup("Add_product").snapshots(),
builder:(BuildContext context,AsyncSnapshotsnapshot){
if (!snapshot.hasData) {
return Center(child: LoadingAnimationWidget.staggeredDotsWave(color: Colors.red, size: 10));
}
return Container(
margin: EdgeInsets.symmetric(horizontal: 0.7),
child: GridView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.0,
mainAxisSpacing: 8.0,
crossAxisSpacing: 2.0,
),
itemCount: snapshot.data!.docs.length,
itemBuilder: (itemBuilder,index){
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Container(
color: Colors.grey[300],
child: InkWell(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (builder)=>detail(
url: snapshot.data!.docs[index]["url"],
productName: snapshot.data!.docs[index]["product_name"],
productPrice: snapshot.data!.docs[index]["product_price"],
)));
},
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(9.0),
child: Image.network(snapshot.data!.docs[index]["url"],width: MediaQuery.of(context).size.width*.49,height:MediaQuery.of(context).size.height*.17 ,),
),
Text(snapshot.data!.docs[index]["product_name"],style: TextStyle(fontWeight: FontWeight.bold),),
Text("Rs."+snapshot.data!.docs[index]["product_price"]),
],
),
),
),
),
);
},
),
);
}
),
],
),
),