Question 77092 in Flutter Question posted in
The official Flutter documentation can be found here.

How can I apply to image both ink well ripple effect during pressing and shimmer effect during loading? – Flutter

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?

Tags:

2

Answers


  1. 0

    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");
                  },
                ),
              ),
            ),
          ],
        ),
    Login or Signup to reply.
  2. 0

    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',
                                                          ),
                                                          )

                                                  ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search