PhotoViewGallery.builder uses customChild how to zoom pictures?

[evanwsu]

The current picture background is transparent, so I need to set a background color for the picture, which needs to be achieved using PhotoViewGalleryPageOptions.customChild.
There are two problems:

1. Unable to double-click to zoom the picture.
2. How to scale the image width and height.

code segment

PhotoViewGallery.builder(
            itemCount: widget.files.length,
            onPageChanged: onPageChanged,
            pageController: pageController,
            gaplessPlayback: true,
            backgroundDecoration: const BoxDecoration(color: Colors.black),
            builder: (BuildContext context, int index) {
              var path = widget.files[index].path;
              ImageProvider imageProvider;
              if (path.startsWith('http')) {
                imageProvider =
                    CachedNetworkImageProvider(path, maxWidth: screenWidth);
              } else {
                imageProvider =
                    ResizeImage(FileImage(File(path)), width: screenWidth);
              }
              return PhotoViewGalleryPageOptions.customChild(
                child: Container(
                  width: 360,
                  color: Colors.white,
                  child: Image(
                    image: imageProvider,
                    gaplessPlayback: true,
                    fit: BoxFit.contain,
                    width: 360,
                  ),
                ),
                // imageProvider: imageProvider,   >>>Using imageProvider can achieve my needs, but can't set background color.
                filterQuality: FilterQuality.low,
                initialScale: PhotoViewComputedScale.contained,
                gestureDetectorBehavior: HitTestBehavior.opaque,
              );
            },
            loadingBuilder: (context, event) {
              double progress = .0;
              if (event != null) {
                var totalBytes = event.expectedTotalBytes;
                if (totalBytes != null) {
                  progress = event.cumulativeBytesLoaded / totalBytes;
                }
              }
              return Center(
                child: Container(
                  width: 24.0,
                  height: 24.0,
                  child: CircularProgressIndicator(
                    strokeWidth: 2.5,
                    color: ComColors.color_FFFFFF,
                    value: progress,
                  ),
                ),
              );
            },
          )

[evanwsu]

The custom method is not very convenient, child is a specified widget and cannot follow the specified width and height of the zoom

[darkstarx]

Hi @evansherry!
You image doesn't zoom in on double tap because it has original width equal to the constrained box, so the PhotoViewControllerDelegate.nextScaleState goes from PhotoViewScaleState.initial to PhotoViewScaleState.covering (by the defaultScaleStateCycle) and checks the new scale, which equals the prev scale since it's originally covering because the childSize for Image equals constrained box. Then the delegate continues moving by the defaultScaleStateCycle and goes to originalSize which equals to the constrained box as well, after that it goes to PhotoViewScaleState.initial again and checks if it equals to the original state (which is PhotoViewScaleState.initial), and if it does, it just stops.

You have two options:

1. Set childSize with any rational value greater than screen size.
2. Don't use the screenWidth but resolve the original image size from you ImageProvider and asynchronously update the state with new resolved size for childSize property for your PhotoViewGalleryPageOptions.