Job description
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.