title: Flutter Zoom image inside container
body: <p>I can use the Interactive Viewer to zoom the image inside the Container.
  However, it seems that the scale of the image is changing, not that the image is enlarged inside the container.</p>
  <p>Do you know how to zoom the image without going out of the container's area?</p>
  <pre><code>Container(
          width: this.size!.width,
          height: this.size!.height,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black, width: 2.0),
          ),
          child: InteractiveViewer(
            clipBehavior: Clip.none,
            panEnabled: true,
            minScale: 1.0,
            maxScale: 3.0,
            onInteractionStart: (details) {
              if (details.pointerCount &lt; 2) return;
            },
            onInteractionUpdate: (details) {
              details.focalPoint;
            },
            child: GestureDetector(
              onHorizontalDragEnd: (DragEndDetails details) {
                if (details.primaryVelocity! &gt; 0) {
                  context
                      .read&lt;ServerCommunicationProvider&gt;()
                      .decrementPageIndex();
                } else if (details.primaryVelocity! &lt; 0) {
                  context
                      .read&lt;ServerCommunicationProvider&gt;()
                      .incrementPageIndex();
                }
              },
              child: Image(
                image: AssetImage(
                    context.watch&lt;ServerCommunicationProvider&gt;().imagePath[
                        context.watch&lt;ServerCommunicationProvider&gt;().nPageIndex]),
              ),
            ),
          ),
        ),
  </code></pre>
  <p>I solved this using 'photo_view'. I've attached the source that fixed the problem below.</p>
  <pre><code>
        child: Container(
          width: this.size!.width,
          height: this.size!.height,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black, width: 2.0),
          ),
          child: GestureDetector(
              onHorizontalDragEnd: (DragEndDetails details) {
                if (details.primaryVelocity! &gt; 0) {
                  context.read&lt;ServerCommunicationProvider&gt;()
                      .decrementPageIndex();
                } else if (details.primaryVelocity! &lt; 0) {
                  context.read&lt;ServerCommunicationProvider&gt;()
                      .incrementPageIndex();
                }
              },
              child: ClipRect(
                child: PhotoView(
                  imageProvider: AssetImage('${context
                      .watch&lt;ServerCommunicationProvider&gt;()
                      .imagePath[
                  context
                      .watch&lt;ServerCommunicationProvider&gt;()
                      .nPageIndex
                  ]}'),
                  maxScale: PhotoViewComputedScale.contained * 2.0,
                  minScale: PhotoViewComputedScale.contained,
                  initialScale: PhotoViewComputedScale.contained,
                ),
              ),
          ),
        ),
  </code></pre>