flutterstack

Flutter : stack & Ink overlay


I am using a Stack to recreate this effect :

enter image description here

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

enter image description here

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

Solution

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