How can I apply to image both ink well ripple effect during pressing and shimmer effect during loadi-CodePudding

I would like an image with shimmer effect applied while loading, similar to the fancy_shimmer_image package, to also receive ripple effect from an InkWell. Is there a way to do this?

CodePudding user response：

The only way i found to do that is this "trick". Use a Stack for set a widget on top of your image. And then the inkwell effect works:

Stack(
          children: [
            // image with shimmer effect
            FancyShimmerImage(
              imageUrl:
                  'https://cdn.pixabay.com/photo/2014/06/03/19/38/board-361516_960_720.jpg',
              shimmerBaseColor: Colors.amberAccent,
              shimmerHighlightColor: Colors.redAccent,
              shimmerBackColor: Colors.greenAccent,
            ),
            //use this widget on top to do the effect
            Positioned.fill(
              child: Material(
                color: Colors.transparent,
                child: InkWell(
                  // splashColor: Colors.lightGreenAccent,
                  onTap: () {
                    print("on tap");
                  },
                ),
              ),
            ),
          ],
        ),

CodePudding user response：

use the shimmer package and cached network image and use it like that

    CachedNetworkImage(
                                                      imageUrl: prov
                                                          .cart
                                                          .cartItems[index]
                                                          .image,
                                                      placeholder:
                                                          (context, url) =>
                                                          Shimmer.fromColors(
                                                            baseColor: Colors.grey.shade300,
                                                            highlightColor: Colors.white,
                                                            enabled: true, child:                                                               Image.asset(
                                                            'assets/images/product_placeholder.png',
                                                          ),
                                                          )

                                                  ),