flutterimagegalleryfullscreenpinchzoom

Flutter Gallery Image Fullscreen Zoomable


I'm building a flutter app that displays products. Now, in the product details page I fetch product data along with product images as URLs using http package.

My question is what is the best way to represent product images to users? I have searched Google for a Flutter package similar or close to the web lightbox but couldn't find any.

Any advise?


Solution

  • In your detail page:

    Show images using ListView in a Image widget with maybe 60x60 width/height as a thumbnail.

    On click of a image -> Push a new page which has a swiper in it. While pushing you should provide the list of items and the currently selected one. Also later on check for Hero widget to have a smooth transition between those pages.

    Image full screen page:

    Place a PageView widget. Use the provided list in the itemBuilder and itemCount parameters. It comes with gesture detection and animation between pages. In each of these pages use a Image widget to display the image as full size.

    Since you have not provided any code sample, I won't be able to help you more but once you progress and have questions then it is better to ask with your current code.