Flutter Text Button Ripple Effect

Question

I'm currently making an apps using Flutter for Android and facing some problem. So I'm currently using TextButton to make button in my apps and here's the code:

class RevisedButton extends StatelessWidget {
  final String descButton;
  final Function press;
  final Color color, textColor;
  const RevisedButton({
    Key key,
    this.descButton,
    this.press,
    this.color,
    this.textColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      padding: EdgeInsets.all(5),
      width: size.width * 0.88,
      margin: EdgeInsets.fromLTRB(10, 13, 10, 0),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(10),
        boxShadow: [
          BoxShadow(
            color: Colors.black45,
            offset: Offset(4, 4),
            blurRadius: 4.0,
          ),
        ],
      ),
      child: TextButton(
        style: TextButton.styleFrom(
          padding: EdgeInsets.symmetric(vertical: 4),
        ),
        onPressed: press,
        child: Text(
          descButton,
          style: TextStyle(
            color: textColor,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

Everything is working fine except when I pressed the button where I can't seem to get the ripple effect quite right.

As you can see in the pictures, when I press the button the effect won't cover the whole button itself (I'm using container to make the button body itself). I also have tried adding ButtonStyle and TextStyle with padding (EdgeInsets.all and EdgeInsets.symmetric) but sill have no luck. Any answer is welcomed, thanks in advance :)

user_10488444 · Answer

Seems like the problem is related to the color being set at multiple places. Since the ripple effect should only cover the surface of the button and not the shadow itself, you can use the backgroundColor property of the TextButton.styleFrom() and use a Container within the TextButton itself to set the size. This should work:

@override
Widget build(BuildContext context) {
  Size size = MediaQuery.of(context).size;
  return Container(
    padding: EdgeInsets.all(5),
    margin: EdgeInsets.fromLTRB(10, 13, 10, 0),
    decoration: BoxDecoration(
      // color: color, <-- Don't need the color here, will cause the above issue
      borderRadius: BorderRadius.circular(10),
      boxShadow: [
        BoxShadow(
          color: Colors.black45,
          offset: Offset(4, 4),
          blurRadius: 4.0,
        ),
      ],
    ),
    child: TextButton(
      style: TextButton.styleFrom(
        backgroundColor: color,
        padding: EdgeInsets.symmetric(vertical: 4),
      ),
      onPressed: press,
      child: Container(
        width: size.width * 0.88, // <-- set the sizing here
        height: 50,
        alignment: Alignment.center,
        child: Text(
          descButton,
          style: TextStyle(
            color: textColor,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ),
  );
}

Result:

Flutter Text Button Ripple Effect

1 Answers