pinch_zoom icon indicating copy to clipboard operation
pinch_zoom copied to clipboard

How can i use it with Image.memory() ???

Open Ujjawalmaurya opened this issue 3 years ago • 1 comments

Ujjawalmaurya avatar Feb 16 '22 08:02 Ujjawalmaurya

I am using MemoryImage as well and was encountering error:

The following UnsupportedError was thrown during a scheduler callback: Unsupported operation: Infinity or NaN toInt

I am also using this inside of a column which has potentially infiniti for a height.

I was required to place the image inside a SizedBox with fixed width and height in order for the PinchZoom() widget to work without issue.

Here is my implementation with LayoutBuilder to get the width of the column, and calculate the height of the image. My MemoryImage originates from a base64 string.

Column Content Base64Image() widget returns an Image() widget with a MemoryImage() widget on theimage: parameter.

          const SizedBox(height: 10),
          // Render the Base64 Image with Pinch Zoom
          if (_base64Image != null)
            // PinchZoom requires a constrained box container, such as SizedBox. Use LayoutBuilder to get the constraints.
            LayoutBuilder(
              builder: (BuildContext context, BoxConstraints innerConstraints) {
                // Get the image dimensions so that we can set the constraints because height is infinity in this situation
                // Default to ratio of 1 if img data is null or unavailable.
                dart_image.Image? _img = dart_image.decodeImage(base64Decode(_base64Image));
                var _imageRatio = (_img?.width ?? 1) / (_img?.height ?? 1);

                var _width = innerConstraints.maxWidth;
                var _height = _width / _imageRatio; // get height from ratio

                return SizedBox(
                  width: _width,
                  height: _height,
                  child: PinchZoom(
                    child: Base64Image(
                      base64ImageString: _inProcessContentData.snapshotBase64Image,
                      width: _width,
                      height: _height,
                    ),
                  ),
                );
              },
            ),
          const SizedBox(height: 20),

mdrideout avatar Apr 19 '22 23:04 mdrideout