Flutter Firestore > Streambuilder > ListView to detailpage onTap

Question

I am changing the way my app gets data. I used to do it with json files but I am now changing to Firestore. I've succeeded in building a list with Streambuilder > ListView.builder but I cannot figure out how to get data to a detailpage. I can't seem to find any solutions on the internet. Nobody mentions a detailpage in blogs or tutorials...

Streambuilder > ListView.Builder > List Items > Click item > Detailpage with the same data.

Here is what I have so far...

@override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return new Scaffold(
      body: StreamBuilder(
        stream: FirebaseFirestore.instance.collection('Crete').
        where('prefecture', isEqualTo: 'Heraklion',).
        where('type', isEqualTo: 'historical site',).snapshots(),
        builder: (context, snapshot) {
        if (!snapshot.hasData) return const Center(child: CircularProgressIndicator(),);
        return ListView.builder(
          itemCount: snapshot.data.docs.length,
          itemBuilder: (context, index) =>
              _buildListItemHeraklionHistoricalSites(context, snapshot.data.docs[index]),
        );
      }),
    );
  }

_buildListItemHeraklionHistoricalSites:

Widget _buildListItemHeraklionHistoricalSites(BuildContext context, DocumentSnapshot document){
  return InkWell(
    onTap: () => DetailsPageHistory(),
    child: Container(
      width: SizeConfig.blockSizeHorizontal*90,
      height: SizeConfig.blockSizeVertical*20,
      margin: EdgeInsets.only(bottom: 15, left: 20, right: 20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        image: DecorationImage(image: CachedNetworkImageProvider(document['image']),
        fit: BoxFit.cover,),
      ),
      child: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.black.withOpacity(0.2),
              borderRadius: BorderRadius.circular(10),
            ),
          ),
        ],
      )
    ),
  );
}

Victor Eronmosele Victor Eronmosele · Accepted Answer · 2021-07-15T09:04:58

You can pass the data to the DetailsPageHistory() through the constructor.

Change this:

    onTap: () => DetailsPageHistory(),

to this:

    onTap: () => Navigator.push(
                   context,
                   MaterialPageRoute(builder: (context) => DetailsPageHistory(document: document)),
                 ),

And in your DetailsPageHistory widget you can define the parameters like this:

    class DetailsPageHistory extends StatelessWidget {
      final DocumentSnapshot document;
    
      const DetailsPageHistory({Key key, @required this.document,}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        ...
      }

Checkout how to send data to a new screen

Flutter Firestore > Streambuilder > ListView to detailpage onTap

1 Answers