flutter firestore push document data to details screen - flutter

Question

I need to click on the list, and open a new detail page. I've looked everywhere for examples of how to do this and I found many. However my data is structured different and even though my code has no errors it will not populate the details page. Here is what i'm working with:
//page 1
child: ListView.builder(
itemCount:
_documents == null ? 0 : _documents.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/images/roomfield1.png"),
fit: BoxFit.fitWidth,
alignment: Alignment.topCenter),
color:
Theme.of(context).canvasColor,
),
child: ListTile(
title: Text(_documents[index]
['title']),
subtitle: Text(_documents[index]
["description"]),
trailing: Text(_documents[index]
['citystate']),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
DetailPage(_documents[index])));
})));
},
Here is the details page:
// details page
import 'package:flutter/material.dart';
class DetailPage extends StatefulWidget {
DetailPage(_documents, {Key key,}) : super(key: key);
#override
_DetailPageState createState() => _DetailPageState();
}
class _DetailPageState extends State<DetailPage> {
var _documents;
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Details Page'),
),
body: ListView.builder(
itemCount: _documents == null ? 0 : _documents.length,
itemBuilder: (BuildContext context,[index]) {
return ListTile(
title: Text(_documents[index]['title']),
);
}));}}
My documents use the documentId. i tried passing the id and then using it in a stream builder and that didn't work either. I think my code is close, but I don't know what is wrong. Also I cant change the structure of the data, because it is used all over the place in this format. I'm guessing its something simple that i missed, maybe the constructor on the details page but i'm not sure...Any insight is appreciated.

Answer 1

You created a variable called _documents at the top of the class. However, to retrieve the value of the actual _documents variable in the DetailPage class, you need to use widget.documents. I have provided the correct code below for you to use.
Also, I don't know why you're using a StatefulWidget for your DetailPage class since you don't seem to be doing anything that requires state management. You could easily make this a StatelessWidget but maybe there's more code that I'm unable to see.
// details page
import 'package:flutter/material.dart';
class DetailPage extends StatefulWidget {
final var documents; // created new final variable that will be initialized by the constructor
DetailPage(this.documents);
#override
_DetailPageState createState() => _DetailPageState();
}
class _DetailPageState extends State<DetailPage> {
//var _documents; // Don't use this
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Details Page'),
),
body: ListView.builder(
itemCount: widget.documents == null ? 0 : widget.documents.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(widget.documents[index]['title']), // don't know why you need to specify the index since you already did in your other classs
);
}));}}