flutterflutter-html

Open image to full screen, if tapped - flutter_html


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

Solution

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