Flutter Component for Viewing Large Images.

Objective:

To create a Flutter component for displaying and browsing large images in a web application, with a focus on optimization for both desktop and mobile browsers.

Key Features:

1. Responsive Display: The component should adapt to the screen width. Approximately 20% of the screen is occupied by other components. The image should occupy the rest of the screen.

2. Initial View: The image should automatically fit the width of the container, with the ability to scroll the height.

3. Interactivity: Users should be able to zoom in, zoom out, and pan the image, similar to Google Maps.

4. High Image Quality: Maintain sharp image quality even at high zoom levels.

5. Performance: Optimize for smooth operation. Scrolling, zooming, and panning should not lag.

Technical Requirements:

1. FlutterFlow Compatibility: Easy integration with the existing web application.

2. Quality Issue Resolution: Avoid image quality problems that occur when using InteractiveViewer with the fitWidth parameter.

3. Support for various formats (png/jpg/webp) and image sizes.

4. Responsiveness: Proper functioning on different screen sizes.

Additional Notes:

- Priority is optimization for the web version of the application.

- Special attention should be paid to maintaining high image quality at high zoom levels (we can assume the image is 6000-10000 px).

- The component should be easy to use and configure in the context of FlutterFlow.