Flutter. How to open a specific picture from image grid?

Question

I have an image grid "StaggeredImageGrid" and what I want is that when I tap on one of those images, that image should show up at the top of the screen. To put it in other words, you all know Instagram posts, right. When you go to your profile page and click one of the images from the grid view, exactly that image pops up on the top of your screen and you can scroll up and down to see the other images as well.

child: new StaggeredGridView.countBuilder(
                    physics: NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    crossAxisCount: 4,
                    mainAxisSpacing: 3,
                    crossAxisSpacing: 3,
                    staggeredTileBuilder: (int index) =>
                        new StaggeredTile.count(2, index.isEven ? 2 : 3),
                    itemCount: _posts.length,
                    itemBuilder: (BuildContext context, int index) {
                       
                        Post post = _posts[index];
                        List<PostView> postViews = [];
                        _posts.forEach((post) {
                          postViews.add(PostView(
                            currentUserId: widget.currentUserId,
                            post: post,
                            author: _profileUser,
                          ));
                        });
                        return GestureDetector(
                          onTap: () => Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => SingleChildScrollView(
                                child: ListView.builder(
                                  padding: EdgeInsets.only(top: 0),
                                  physics: NeverScrollableScrollPhysics(),
                                  shrinkWrap: true,
                                  itemCount: postViews.length,
                                  itemBuilder:
                                      (BuildContext context, int index) {
                                    return Column(children: postViews);
                                  },
                                ),
                              ),
                            ),
                          ),
                          child: Container(
                            decoration: BoxDecoration(
                              color: Colors.transparent,
                              borderRadius: BorderRadius.all(
                                Radius.circular(15),
                              ),
                            ),
                            child: ClipRRect(
                              borderRadius:
                                  BorderRadius.all(Radius.circular(7)),
                              child: Image(
                                image:
                                    CachedNetworkImageProvider(post.imageUrl),
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                        );
                      
                    },
                  ),

When I am clicking on one of the images, I am getting the list of images starting from beginning instead of that exact image.

Answer 1

Try to implement scroll_to_index listview in your second page when pressing the image of your grid, when you press image, pass index to second page and jump to that index image after build:

ListView(
  scrollDirection: scrollDirection,
  controller: controller,
  children: randomList.map<Widget>((data) {
    final index = data[0];
    final height = data[1];
    return AutoScrollTag(
      key: ValueKey(index),
      controller: controller,
      index: index,
      child: Text('index: $index, height: $height'),
      highlightColor: Colors.black.withOpacity(0.1),
    );
  }).toList(),
)