Loading Fullscreen image by tapping on a thumbnail-CodePudding

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.

CodePudding user response：

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}'),
        ),
      );
    },
  )