Flutter Navigator push data from firebase - firebase

Question

We are trying to get data from firebase which we have currently being rendered within a grid view, but I want to be able to click on the item within the grid view and read more about it.
This is what I have so far and the error I am getting in VS
The argument type 'DocumentSnapshot' can't be assigned to the parameter type 'Merchant'.
HomeScreen
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'dart:async';
import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:paylaterapp/screens/GridMerchantDetails.dart';
Future<void> main() async {
final FirebaseApp app = await FirebaseApp.configure(
name: 'BNPL',
options: const FirebaseOptions(
googleAppID: '***',
gcmSenderID: '***',
apiKey: '***',
projectID: '***',
),
);
final Firestore firestore = Firestore(app: app);
await firestore.settings(timestampsInSnapshotsEnabled: true);
}
class HomeScreen extends StatelessWidget {
HomeScreen(this.firestore);
final Firestore firestore;
CollectionReference get merchants => firestore.collection("merchants");
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stores'),
),
body: _gridView(),
);
}
Widget _gridView() {
return StreamBuilder<QuerySnapshot>(
stream: firestore.collection('merchants').orderBy('name', descending: false).snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) return const Text('Loading...');
final int merchantCount = snapshot.data.documents.length;
return GridView.builder(
scrollDirection: Axis.vertical,
itemCount: merchantCount,
gridDelegate:
new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemBuilder: (_, int index) {
final DocumentSnapshot document = snapshot.data.documents[index];
final dynamic logo = document['logo_url'], mainImage = document['main_image_url'];
return
CupertinoButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => GridMerchantDetails(document),
),
);
},
child: (
Container(
height: 300,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey,
image: DecorationImage(
image: new NetworkImage(mainImage != null ? mainImage.toString() : 'https://images.unsplash.com/photo-1446844805183-9f5af45f89ee',
)
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Image.network(logo != null ? logo.toString() : 'https://images.unsplash.com/photo-1446844805183-9f5af45f89ee',
width: 220,
fit: BoxFit.fill,
)
]
)
)
)
);
},
);
},
);
}
}
class GridMerchantDetails extends StatelessWidget {
final Merchant merchant;
GridMerchantDetails(this.merchant);
#override
Widget build(BuildContext context) {
return Scaffold(
primary: true,
appBar: AppBar(
title: Text(merchant.name),
),
backgroundColor: Colors.deepPurpleAccent,
body: ListView(
children: <Widget>[
HeaderBanner(this.merchant),
Container(
padding: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 20.0),
child: Text(
merchant.desc,
style: TextStyle(
fontSize: 13.0,
color: Colors.white,
),
),
),
],
),
);
}
}