InkWell not showing ripple effect

Tapping the container triggers the onTap() handler but does not show any ink splash effect.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new InkWell(
          onTap: (){print("tapped");},
          child: new Container(
            width: 100.0,
            height: 100.0,
            color: Colors.orange,
          ),
        ),
      ),
    );
  }
}

Step 1. Use Material as parent for your InkWell , otherwise it won’t show ripple effects.

Step 2. Give color to the Material widget, this is going to be the color you were using in your Container .

Step 3. Don’t forget to use onTap() even if you don’t have anything to handle.

Simple example :

Widget myWidget() {
  return Material( // needed
    color: Colors.orange,
    child: InkWell(
      onTap: () {}, // needed
      child: Container(width: 100.0, height: 100.0),
    ),
  );
}

Hope this helps!

1 Like
Inkwell(
  OnTap:(){}
  splash color : Colors.blue,
);

Give splash color inside it.
This is also helps to know that you tap that widget or not.

3 Likes

@Rahmanr9697 Thanks! Will try this.