CODEWITHSUNDEEP
androidflutterdartvisual-studio-code
Flite
Flite

Reputation: 59

Flutter Text Button Ripple Effect

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.enter image description here

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 :)

Upvotes: 3

Views: 7009

Answers (1)

Bach
Bach

Reputation: 3326

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:
enter image description here

Upvotes: 3

Related Questions