Flutter : stack & Ink overlay

Question

I am using a Stack to recreate this effect :

But for some reason, using the Ink widget to be able to get the gradient effect, this is what I have :

This is my code :

Stack(
                        children: [
                          SizedBox(
                            height: 100.0,
                            width: 100.0,
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(20.0),
                              child: CachedNetworkImage(
                                imageUrl:
                                    'https://images.unsplash.com/photo-1570296767266-60ccc88974a5',
                                fit: BoxFit.cover,
                                placeholder: (context, url) => MC_Shimmer(),
                              ),
                            ),
                          ),
                          Positioned(
                            right: -5.0,
                            bottom: -5.0,
                            child: SizedBox(
                              height: 30.0,
                              width: 30.0,
                              child: Ink(
                                decoration: BoxDecoration(
                                  gradient: gradient,
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(5.0)),
                                ),
                                child: Icon(
                                  OMIcons.cameraAlt,
                                  color: Colors.white,
                                  size: 15.0,
                                ),
                              ),
                            ),
                          )
                        ],
                      ),

Answer 1

Try simply wrapping your Ink widget inside a Material.

I tried this in dart pad it worked alright.

Positioned(
                    right: -5.0,
                    bottom: -5.0,
                    child: SizedBox(
                      height: 30.0,
                      width: 30.0,
                      child: Material(
                        child: Ink(
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                                colors: [Colors.pink, Colors.yellow]),
                            borderRadius: BorderRadius.all(Radius.circular(5.0)),
                          ),
                          child: Icon(
                            Icons.camera,
                            color: Colors.white,
                            size: 15.0,
                          ),
                        ),
                      ),
                    ),
                  )

Answer 2

you can use Container instead of Ink and able to use gradient effect.

Positioned(
      right: -5.0,
      bottom: -5.0,
      child: SizedBox(
        height: 30.0,
        width: 30.0,
        child: Container(
          decoration: BoxDecoration(
            gradient: gradient,
            borderRadius:
            BorderRadius.all(Radius.circular(5.0)),
          ),
          child: Icon(
            OMIcons.cameraAlt,
            color: Colors.white,
            size: 15.0,
          ),
        ),
      ),
    )