Loading Fullscreen image by tapping on a thumbnail

January 9, 2023

I want to load a Fullscreen image by tapping on its thumbnail. I have the following part of code:

.
.
.
Ink.image(
    image: AssetImage('assets/images/${channelPostModel.image}'),
    height: 200,
    fit: BoxFit.fitWidth,
    child: InkWell(
        onTap: () {
            OpenImage(
            imageAddress:
            'assets/images/${channelPostModel.image}')
            .build(context);
          },
     ),
),
.
.
.

I have used the following class for Fullscreen image:

OpenImage.dart:

class OpenImage extends StatelessWidget {
  const OpenImage({super.key, required this.imageAddress});
  final String imageAddress;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage(imageAddress), fit: BoxFit.cover)),
      ),
    );
  }
}

When I tap the thumbnail, the Fullscreen image is not shown. I tried to debug this class and see whether the image address is passed or not. I saw that the address is passed correctly.

>Solution :

You need to navigate to the page OpenImage on clicking on the thumbnail. So inside the onTap of the InkWell widget, navigate to the next page as:

InkWell(
    onTap: () {
      Navigator.of(context).push(
        MaterialPageRoute(
          builder: (context) =>
              OpenImage(imageAddress: 'assets/images/${channelPostModel.image}'),
        ),
      );
    },
  )