How to make the onPressed shadow transparent?-CodePudding

Problem

I create buttons with custom shape. When the button is pressed, the shadow appears, but I don't need it.

My solution

I set elevation: 0, but it didn't disabled the "onPress" shadow. I set the highlightColor parameter and the shadow color, but I couldn't remove it completely. Finally, I set the shape to the shape of the child Container, but it won't work in all situations, I would like to know how to disable the shadow.

Example Code

I was trying to set some properties in ButtonStyle(), but without success.

ElevatedButton(
        style: ButtonStyle(),
        onPressed: () {},
        child: Image.asset(
          'assets/mypic.png',
        ),
      ),

How it looks like

Question

How do I remove the shadow color in the corners? Can you give me an example of the Button with transparent "onPress" shadow?

CodePudding user response：

Checkout these docs on button elevations and buttons with custom shapes.

Though these are migration guides, they'll be of good help to implement this design

CodePudding user response：

Ok, I solved it myself. So I wrote this code:

 TextButton(
      style: ButtonStyle(
        minimumSize: MaterialStateProperty.all(
            Size(MediaQuery.of(context).size.width, 200)),
        padding: MaterialStateProperty.all(EdgeInsets.zero),
        side: MaterialStateProperty.all(BorderSide.none),
        shadowColor: MaterialStateProperty.all(Colors.transparent),
        overlayColor: MaterialStateProperty.all(Colors.transparent),
      ),
      onPressed: onPressed,
      child: Container(/* my child */)
    ),

Setting properties shadowColor and overlayColor to transparent actually solved the issue. It makes the effect of pressing button completely invisible.

So the best option is to make button the same shape as it's child, but my solution is OK when it's hard to work with child.