How to add a Highlight color to a Container having a Image?

Question

I have a container with its image property. The container is wrapped in a gesture detector. On long Press, a dialogue is open which shows multiple options to deal with an image.
I want to add a highlight colour to the image, So that when user long press and highlight colour is seen. I tried using inkwell, but nothings happen. Is there any way to achieve this effect?

GestureDetector(
        onLongPress: () {
          buildPeepShow(context, widget.post);
        },
        child: Material(
          color: Colors.transparent,
                  child: InkWell(
            splashColor: Colors.black.withAlpha(100),
                    child: Stack(
              children: [
                Container(
                  decoration: BoxDecoration(
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black.withOpacity(0.3),
                            spreadRadius: 0.3,
                            blurRadius: 8.0)
                      ],
                      color: Colors.yellow,
                      borderRadius: BorderRadius.circular(16.0),
                      image: DecorationImage(
                          image: CachedNetworkImageProvider(
                              widget.post.downloadURL[0]),
                          fit: BoxFit.cover)),
                ),
                Visibility(
                  visible: widget.post.downloadURL.length > 1 ? true : false,
                  child: Padding(
                    padding: const EdgeInsets.only(top: 5.0, right: 8.0),
                    child: Image.asset(
                      'images/more.png',
                      scale: 10,
                    ),
                  ),
                ),
              
              ],
            ),
          ),
        ),
      );

@SaifulIslam I have added the code, please do let me know is there's some solution. — kanwar manraj, Dec 06 '20 at 05:59
let me know where exactly do you want the splash effect? inside your visibility widget on 'images/more.png' image? — Saiful Islam, Dec 06 '20 at 06:37
I added an answer try this and please notify me if its work or not. — Saiful Islam, Dec 06 '20 at 06:42
and sorry I don't need the splash colour, I need the Highlight colour (i have made the edit ) and inkwell is having this property, but still, the effect is shown under background and not over the image. — kanwar manraj, Dec 06 '20 at 06:54

score 0 · Answer 1 · answered Dec 06 '20 at 05:49

0

Wrap your InkWell in a Material widget, then set splash color property on the InkWell to see the splash effect:

Material(
      color: App.transparent,
      child: InkWell(
        splashColor: App.black.withAlpha(100),
        child: Container(
              child: <YourImageWidgetHere>
        ),
      ),
);

answered Dec 06 '20 at 05:49

Teddichiiwa

735
6
8

I tried this method and have included in the above edit. But it still didn't work. – kanwar manraj Dec 06 '20 at 05:59

score 0 · Answer 2 · answered Dec 06 '20 at 06:41

Replace your code snippet with this one

return Stack(
      children: [
        Container(
          decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                    color: Colors.black.withOpacity(0.3),
                    spreadRadius: 0.3,
                    blurRadius: 8.0)
              ],
              color: Colors.yellow,
              borderRadius: BorderRadius.circular(16.0),
              image: DecorationImage(
                  image: CachedNetworkImageProvider(
                      widget.post.downloadURL[0]),
                  fit: BoxFit.cover)),
        ),
        Visibility(
          visible: widget.post.downloadURL.length > 1 ? true : false,
          child: Material(
            child: InkWell(
              splashColor: Colors.red, // or the color you want
              onLongPress: (){
                //show your on long press event
              },
              child: Padding(
                padding: const EdgeInsets.only(top: 5.0, right: 8.0),
                child: Image.asset(
                  'images/more.png',
                  scale: 10,
                ),
              ),
            ),
          ),
        ),
      ],
    );

I tried somewhat of this by adding inkwell and Material to my container , But the effect is shown on the background, not over the image. — kanwar manraj, Dec 06 '20 at 06:49

score 0 · Answer 3 · answered Dec 06 '20 at 07:02

0

I am closing my question because I found out its a duplicate of InkWell ripple over top of image in GridTile in Flutter I thanks to everyone who spent their time on this question

answered Dec 06 '20 at 07:02

kanwar manraj

492
8
26

How to add a Highlight color to a Container having a Image?

3 Answers3