How open Image in full Screen when we click on any image in list in Flutter?

Question

Here I want to open image in full screen when I click on any particular image which I set in GridView.builder() widget. So When I click on 1st image it display on other screen as full screen image. So, how I accomplish this?

I get list of image through APIs in GridView.builder(). So, how to open particular image on full screen when I click on any particular image.

Answer 1

You can get full screen image easily by following the below code.Also,bonus: Hero animation. Hope this helps

GestureDetector(
        onTap: () {
          Navigator.push(context,
              MaterialPageRoute(builder: (_) {
                return FullScreenImage(
                  imageUrl:
                  imageUrlHere,
                  tag: "generate_a_unique_tag",
                );
              }));
        },
        child: Hero(
          child: YourImageView,
          tag: "generate_a_unique_tag",
        ),
      ),

I have used cached_network_image 2.0.0 for caching and displaying image

class FullScreenImage extends StatelessWidget {
  final String imageUrl;
  final String tag;

  const FullScreenImage({Key key, this.imageUrl, this.tag}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black87,
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: tag,
            child: CachedNetworkImage(
              width: MediaQuery.of(context).size.width,
              fit: BoxFit.contain,
              imageUrl: imageUrl,
            ),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}