How can I locally save a specific image from the flutter web Application

Question

How can I locally save a specific image from the Flutter web Application? I'm working on a Flutter web application. When I right-click and save the image from the Flutter web application it's saved as the entire screen. I'm trying to figure out how to save a single image locally from the Flutter web application but I'm having trouble doing it from the browser because it saves the image as the complete screen in html file. But in a different stack website, we can save a single image locally by right click on it, in flutter web I am facing these difficulties in how to overcome this. But I code all the images in the screen as the image widget and align using the layout widget. I share the images and sample them here. how to get through these challenges.

Answer 1

I usually try not to add the image to my assets (because the size of the web application is too big), so I add all of my images to a server and then use Image.network , to save the image, I usually add a Gesture detector that will open a new tab to the image URL . something like this :

import 'dart:html' as html;
class CustomImage extends StatelessWidget {
  final String url;
  const CustomImage({Key? key, required this.url}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          html.window.open(url, "_blank");
        },
        child: Image.network(url));
  }
}