Image onTap

[Invincible1996]

When I want to click on the image to another page, I don't know how to do.

[tje3d]

@sinceyoyo currently it's not possible to set onTap for every image, but instead you can wrap whole your carousel in a InkWell or GestureDetector.

InkWell(
  onTap: () {
    // Do something here
  },
  child: Carousel(
    images: [
      // ...
    ],
  ),
),

[anisalibegic]

@sinceyoyo currently it's not possible to set onTap for every image, but instead you can wrap whole your carousel in a InkWell or GestureDetector.

InkWell(
  onTap: () {
    // Do something here
  },
  child: Carousel(
    images: [
      // ...
    ],
  ),
),

How to access current image index in the carousel? For example, when I tap the carousel I want it to show current image in fullscreen...

[iesmail3]

Has this issue been resolved? (i.e, getting the index of the current image).

[anisalibegic]

I made a PR but it seems that author does not care.

[iesmail3]

Do you know of any other carousel plugin that supports this feature?

[anisalibegic]

Copy the source code of this plugin and add it to your project. Then see what I have done in my PR and add those changes to the file you downloaded. Then remove the plugin from pubspec.yaml and import the file you previously created.

[baltejsingh88]

This is how i was able to make it happen without copying the source code in my project and just using it as an package.

child: new Carousel(
                    images: _listBannerImages(),
}

my _listBannerImages() was like:

_listBannerImages() {
    var bannerImages = [];
    for (var image in banners) {
      bannerImages.add(new GestureDetector(
        onTap: (){
          print(image.url);
        },
        child : Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage(image.image),
                  fit: BoxFit.cover)),
          height: 220.0,
          width: MediaQuery.of(context).size.width,
        ),
      ));
    }
    return bannerImages;
  }

and this did the trick. Now i am able to add onTap actions to it.

Hope this helps others as well

[tje3d]

As this project is not actively maintained, i suggest you guys to try https://pub.dartlang.org/packages/flutter_swiper which is really powerful.

[anisalibegic]

This is how i was able to make it happen without copying the source code in my project and just using it as an package.

child: new Carousel(
                    images: _listBannerImages(),
}

my _listBannerImages() was like:

_listBannerImages() {
    var bannerImages = [];
    for (var image in banners) {
      bannerImages.add(new GestureDetector(
        onTap: (){
          print(image.url);
        },
        child : Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage(image.image),
                  fit: BoxFit.cover)),
          height: 220.0,
          width: MediaQuery.of(context).size.width,
        ),
      ));
    }
    return bannerImages;
  }

and this did the trick. Now i am able to add onTap actions to it.

Hope this helps others as well

Keep in mind that this creates GestureDetector for every photo which is not that great for performance...

[Parables]

where do I add the images using urls? I tried put a list of image urls in the var bannerImages = [ url1, url2, url3 ];

and i got a errors on the GestureDector .... What do I do?

[Parables]

Could you please show a screenshot or provide the codes in full? Errors found:

1. banners is undefined
2. The argument type 'GestureDetector' can't be assigned to the parameter type 'NetworkImage'.

[brunoa2a]

This is how i was able to make it happen without copying the source code in my project and just using it as an package.

child: new Carousel(
                    images: _listBannerImages(),
}

my _listBannerImages() was like:

_listBannerImages() {
    var bannerImages = [];
    for (var image in banners) {
      bannerImages.add(new GestureDetector(
        onTap: (){
          print(image.url);
        },
        child : Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage(image.image),
                  fit: BoxFit.cover)),
          height: 220.0,
          width: MediaQuery.of(context).size.width,
        ),
      ));
    }
    return bannerImages;
  }

and this did the trick. Now i am able to add onTap actions to it.

Hope this helps others as well

Hi man, Tks!!!!!!!!!!