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

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?

CodePudding user response：

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.

CodePudding user response：

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