Flutter Zoom image inside container-CodePudding

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.

Do you know how to zoom the image without going out of the container's area?

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 < 2) return;
          },
          onInteractionUpdate: (details) {
            details.focalPoint;
          },
          child: GestureDetector(
            onHorizontalDragEnd: (DragEndDetails details) {
              if (details.primaryVelocity! > 0) {
                context
                    .read<ServerCommunicationProvider>()
                    .decrementPageIndex();
              } else if (details.primaryVelocity! < 0) {
                context
                    .read<ServerCommunicationProvider>()
                    .incrementPageIndex();
              }
            },
            child: Image(
              image: AssetImage(
                  context.watch<ServerCommunicationProvider>().imagePath[
                      context.watch<ServerCommunicationProvider>().nPageIndex]),
            ),
          ),
        ),
      ),

I solved this using 'photo_view'. I've attached the source that fixed the problem below.


      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! > 0) {
                context.read<ServerCommunicationProvider>()
                    .decrementPageIndex();
              } else if (details.primaryVelocity! < 0) {
                context.read<ServerCommunicationProvider>()
                    .incrementPageIndex();
              }
            },
            child: ClipRect(
              child: PhotoView(
                imageProvider: AssetImage('${context
                    .watch<ServerCommunicationProvider>()
                    .imagePath[
                context
                    .watch<ServerCommunicationProvider>()
                    .nPageIndex
                ]}'),
                maxScale: PhotoViewComputedScale.contained * 2.0,
                minScale: PhotoViewComputedScale.contained,
                initialScale: PhotoViewComputedScale.contained,
              ),
            ),
        ),
      ),

CodePudding user response：

You can use photo_view

@override
Widget build(BuildContext context) {
  return Container(
    child: PhotoView(
      imageProvider: AssetImage("assets/large-image.jpg"),
    )
  );
}

if you use photoViewGallery it will contain the image into the container.

first import

import 'package:photo_view/photo_view_gallery.dart';

Usage of PhotoViewGallery

        AspectRatio(
            aspectRatio: 1,
            child: PhotoViewGallery.builder(
              backgroundDecoration: BoxDecoration(color: Colors.white),
              scrollPhysics: BouncingScrollPhysics(),
              builder: (BuildContext context, int index) {
                return PhotoViewGalleryPageOptions(
                  maxScale: PhotoViewComputedScale.contained,
                  minScale: PhotoViewComputedScale.contained,
                  imageProvider: AssetImage(
                      "assets/images/backgrounds/courses_congrats.png"),
                  initialScale: PhotoViewComputedScale.contained,
                );
              },
              itemCount: 1,
            ),
          )

CodePudding user response：

 Use This Package for zoom Image 


 https://pub.dev/packages/easy_image_viewer