Add some padding between photos in gallery

[dinhha]

Thanks for your wonderful plugin!

Can you guys, add a padding parameter to PhotoViewGallery or some where else? I need to add some padding between photos in gallery.

[renancaraujo]

PhotoViewGallery relies on PageView to provide this kind o behavior. The answer is simple: if we can do that with PageView, we can do that with PhotoViewGallery.

[Stmol]

I wonder why people are not interested in this basic use case 🧐

So here's my solution (probably not perfect):

return Container(
  child: PhotoViewGallery.builder(
    itemCount: photos.length,
    scrollPhysics: const BouncingScrollPhysics(),
    customSize: MediaQuery.of(context).size, // 1. Set custom child size to fit to screen size
    pageController: PageController(viewportFraction: 1.1), // 2. Set fraction of page viewport more than 100%
    backgroundDecoration: BoxDecoration(
      color: Color(0xFFFFFFFF),
    ),
    builder: (_, index) {
      return PhotoViewGalleryPageOptions.customChild(
        child: Container(
          color: Color(0xFFFFFFFF),
          child: Image(
            image: NetworkImage(photos[index].url1024),
            filterQuality: FilterQuality.medium,
          ),
        ),
        initialScale: PhotoViewComputedScale.contained,
        minScale: PhotoViewComputedScale.contained,
      );
    },
  ),
);

[allanwolski]

@renancaraujo

Can you review that?

416

[renancaraujo]

@allanwolski thanks for the effort but that won't be merged.

The idea of adding padding to pages is not that simple. Wrapping internal widgets with a padding prevents the image to reach the borders of the viewport, not simply add spacing between pages, as intended.

For more info: https://github.com/flutter/flutter/issues/38739

[renancaraujo]

For anyone who come to this issue for now on:

Since the gallery is based on the frameworks page view, we shall not divert too much from it.

We have a workaround above and some on this issue: flutter/flutter#38739

Issue to track this on the framework: https://github.com/flutter/flutter/issues/78200

Consider upvoting that issue to be prioritized by the flutter team.

[allanwolski]

Thanks for the feedback @renancaraujo

The native_pdf_view package uses photo_view internally and I need to add a padding to the page.

The solution proposed in #416 solves this problem. Could you see that please?

[renancaraujo]

The gallery page options have too many options already, a large API is hard to maintain. Simply wrapping with padding and adding yet another parameter makes sense since we have the custom child support.

The better solution for you seems to native_pdf_view allow custom wrapping in the custom child or passing through the padding there.

[allanwolski]

Using a custom child, the zoom is applied to the background of the page as well.

Default https://drive.google.com/file/d/1cLpXvsb2MLBo7T1ly0kaw4UokMRvtB39/view https://drive.google.com/file/d/1Q8xjcDn4tFFRd4-scX8vce022j--2JUu/view

Solution proposed in #416 https://drive.google.com/file/d/1J71TTMPXU5_LFoPHFQ-BAlseVspR3D99/view https://drive.google.com/file/d/1LWGi0JpMr-ooCtdHGxbLyhOBxY7VH18b/view

Custom Child https://drive.google.com/file/d/16_UonZ43ha65GLp2PYWh_DXnleBZnRZ8/view https://drive.google.com/file/d/17-4gtSC77S2a6OGxyba3R-j1ebzRwCoU/view

[guilhermedaldim]

I have the same issue, I also need to add a padding between the pages.

[renancaraujo]

Well, we have plenty of workarounds:

One here: https://github.com/flutter/flutter/issues/38739#issuecomment-627118037 Another here: https://github.com/fireslime/photo_view/issues/42#issuecomment-586705010

Comments above state why this won't be worked on the photo view gallery for the reasons stated above.

To avoid comments like "me too" I will be locking this issue.

If you are facing this issue, you can give a thumbs up in this issue to have the flutter team prioritizing this.

Any further comments or ideas on this matter feel free to open a new issue or call in the discord chat.