CODEWITHSUNDEEP
flutterdartsliderflutter-slider
asal rad
asal rad

Reputation: 43

how zoom in carouselslider in flutter?

I have a widget that returns a carouselslider and I want to zoom and pinch the image

this is my code:

Widget myPicture() {
List<Widget> items = [];

for (var i in widget.product.imageUrlList) {
  items.add(
    Image.network(i),
  );
}

return CarouselSlider(
  items: items,
  options: CarouselOptions(
    enlargeCenterPage: false,
  ),
);

  }

i try to write like this:

Widget myPicture() {

List<Widget> items = [];

for (var i in widget.product.imageUrlList) {
  items.add(
    Image.network(i),
  );
}

return InteractiveViewer(
  child: CarouselSlider(
    items: items,
    options: CarouselOptions(
      enlargeCenterPage: false,
    ),
  ),
);
  }

but it doesn't work too

what should I do?

Upvotes: 3

Views: 4044

Answers (3)

manhtuan21
manhtuan21

Reputation: 3475

For anyone in the future need, use with photo_view, the trick is you need a PhotoViewGestureDetectorScope to prevent gesture overlap:

      PhotoViewGestureDetectorScope(
        axis: Axis.horizontal,
        child: CarouselSlider(
          options: CarouselOptions(),
          items: _imageUrls.map((url) {
            return PhotoView(
              minScale: 0.4,
              imageProvider: CachedNetworkImageProvider(url),
            );
          }).toList(),
        ),
      )

Upvotes: 1

Will
Will

Reputation: 11

To the comment above - I ditched the CarouselSlider and opted to use the PhotoViewGallery widget. It works in the same way and is fairly easy to switch over to as it contains mostly identical fields; it also comes included in the photo_view dependency.

If you're still looking for the carousel functionality (where photos loop around), it's not a built-in option but there's a workaround which you can find here.

Upvotes: 0

Ardeshir ojan
Ardeshir ojan

Reputation: 2459

you can use photo view package

PhotoView(
          imageProvider: AssetImage(photos),
          backgroundDecoration: BoxDecoration(color: Colors.white),
        ),

this article helps you create what you want.

Upvotes: 0

Related Questions