Transferring Snapshot data to another widget

Question

I am building a GridView from Firebase as per the below. You will notice that I am routing to DetailScreen() Stateless Widget when one of the cards is clicked.

This all works fine with a static image, however I would like to display the same URL successfully loaded is item['thumb'] from the snapshot in the Image.network within DetailScreen.

body: StreamBuilder<QuerySnapshot>(
    stream:
        FirebaseFirestore.instance.collection('collection').snapshots(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return GridView.builder(
                  itemCount: snapshot.data.docs.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: count),
                  itemBuilder: (BuildContext context, int index) {
                    var item = snapshot.data.docs[index];
                    return Card(
                      semanticContainer: true,
                      clipBehavior: Clip.antiAliasWithSaveLayer,
                      child: InkWell(
                        onTap: () {
                          Navigator.push(context,
                              MaterialPageRoute(builder: (_) {
                            return DetailScreen();
                          }));
                        },
                        child: Image.network(
                          item['thumb'],
                          fit: BoxFit.cover,
                        ),
                      ),
                    );
                  },
                );
              } else
                return Text("No Data");
            }));
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'Image From Firebase To Be Entered Here',
            ),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}

I am unsure as to how to go about transferring the snapshot data across into the new widget?

Answer 1

Change your DetailScreen to

class DetailScreen extends StatelessWidget {
  String image;
  DetailScreen ({@required this.image});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              image,
            ),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}

Now do this In your Card

Card(
                      semanticContainer: true,
                      clipBehavior: Clip.antiAliasWithSaveLayer,
                      child: InkWell(
                        onTap: () {
                          Navigator.push(context,
                              MaterialPageRoute(builder: (_) {
                            return DetailScreen(image: item['thumb']);
                          }));
                        },
                        child: Image.network(
                          item['thumb'],
                          fit: BoxFit.cover,
                        ),
                      ),
                    )

Note: Not sure if we can Push a stateless widget in a route or not, but this is how we can achieve this. If we can't push Stateless widget as Route, you'll need to implement DetailScreen like

class DetailScreen extends StatefulWidget {
  String image;

  DetailScreen({@required this.image});

  @override
  _DetailScreenState createState() => _DetailScreenState();
}

class _DetailScreenState extends State<DetailScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              widget.image,
            ),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}

The rest will be same.