0

I am working on a combination of Icon + Text button using Material 3 as my theme. I have done my homework and researched as much as I could possibly do, as a last desperate attempt, I am posting this question. I am beginner with Flutter.

Image of said custom widget

ANd this is what happens upon clicking:

GIF of clicking on the widget

Here is the relevant code of the widget:

class TransactionButton extends StatelessWidget {
  const TransactionButton({Key? key, required this.icon, required this.text, required this.onTap})
      : super(key: key);

  final void Function() onTap;
  final IconData icon;
  final String text;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.primaryContainer,
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          children: [
            Icon(icon, color: Theme.of(context).colorScheme.onPrimaryContainer,),
            const SizedBox(width: 8,),
            Text(
              text,
              style: Theme.of(context).textTheme.titleMedium?.copyWith(
                  color: Theme.of(context).colorScheme.onPrimaryContainer),
            )
          ],
        ),
      ),
    );
  }
}

Remember, Material 3 is enabled. If you carefuly examine the attached gif you will find that at the corners I can see the ripple effect.

AmaanK
  • 1,032
  • 5
  • 25
  • https://stackoverflow.com/questions/45424621/inkwell-not-showing-ripple-effect?noredirect=1&lq=1 – Ramji Apr 02 '23 at 01:06
  • Yeah, great, I saw that earilear but couldn't figure out that I was supposed to remove color from container itself. – AmaanK Apr 02 '23 at 14:22

1 Answers1

0

You may try adding this to InkWell

 splashFactory: NoSplash.splashFactory,
Niladri Raychaudhuri
  • 792
  • 2
  • 11