Open image to full screen, if tapped - flutter_html

user_8178474 0
Viewed 212

If I am having an image in my HTML, I am not able to open that image to full screen, if tapped.

Below is the built in function available in flutter_html if image is tapped.

onImageTap: (url, context, attributes, element) => {
// code here
}

Is there any way we can achieve this?

I have tried below solution but it didn't worked

onImageTap: (url, context, attributes, element) => {
 Scaffold(
      body: GestureDetector(
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Hero(
            tag: 'imageHero',
            child: Image.network(image),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    )
}
flutter-html flutter
2 Answers

You have to push it as a new page using Navigator.push

onImageTap: (url, context, attributes, element) => {
   Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => FullScreenImageViewer(url)),
   );
}

Here is your stateless widget:

class FullScreenImageViewer extends StatelessWidget {
  const FullScreenImageViewer(this.url,{Key? key}) : super(key: key);
  final String url;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Hero(
            tag: 'imageHero',
            child: Image.network(url),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}
user_168627570

It seems to need Navigator.push() or showDialog.
onImageTap is not rebuild your screen.

user_89120430
Related