Flutter Zoom image inside container

user_15134376 0
Viewed 1408

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,
              ),
            ),
        ),
      ),
dart flutter gesture
1 Answers

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,
            ),
          )
user_116626040
Related