Flutter InkWell splash strength - how to make it more visible globally for the entire app?

638 views Asked by At

In my flutter app, when I click a button (or anything decorated with InkWell) the splash/ripple effect is very gentle, almost invisible. (It is there, it's not covered, just very gentle, too subtle).

When I use other apps (e.g. Google's Gmail app) every time I tap something, the splash/ripple effect is VERY strong and gives good visual to the user what he/she just tapped.

Question:

How to make splash/ripple effect stronger in flutter app?

2

There are 2 answers

1
Gwhyyy On

the InkWell widget gives you control over the splashColor and the highlightColor of it, you need simply to assign them like this:

InkWell(
 splashColor: Colors.red, 
 highlightColor: Colors.green,
 onTap: () {},
 child: `yourChild()`,
 ),

this now will give it a splash ( ink effect ) red color, and when it's highlighted, it will shows green.

0
Azhar Husain Raeisi On

Pro Tip: build a wrapper for InkWell and use in the entire app

class MyInkWell extends StatelessWidget {
  const MyInkWell({Key? key, this.child, this.onTap}) : super(key: key);

  final VoidCallback? onTap;
  final Widget? child;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      // customized you want
      // splashColor: ,
      // focusColor: ,
      // hoverColor: ,
      // highlightColor: ,
      // overlayColor: ,
      // radius: ,
      onTap: onTap,
      child: child,
    );
  }
}

and use your own customized InkWell

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
            child: MyInkWell(
                onTap: () {
                  // on tap callback
                },
                child: const Icon(Icons.abc))),
      ),
    );
  }
}

Regards