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