Inkwel ripple effet not work in grid view

Question

I have always problem with ripple effects. this is my widget :

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(30),
        highlightColor: Colors.blue.withOpacity(0.4),
        splashColor: Colors.green.withOpacity(0.5),
        child: Card(
          margin: EdgeInsets.all(0),
          child: Container(
            color: Colors.orange[100 * (index! % 12 + 1)],
            alignment: Alignment.center,
            child: Text(
              "test",
              style: TextStyle(fontSize: 16),
            ),
          ),
        ),
      ),
    );
  }

and I am using in grid view :

   return Scaffold(
        body: SafeArea(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: CustomScrollView(
          slivers: [
            SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 8,
                crossAxisSpacing: 8,
                childAspectRatio: 1,
              ),
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return CategoryItem(
                    index: index,
                    onTap: () {
                      print("clicked");
                    },
                  );
                },
                childCount: 10,
              ),
            )
          ],
        ),
      ),
    ));

Why not work?

Answer 1

Wrap the card with an Ink widget. More info about ink

EDIT

 return Card(
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () {
            print("hi");
          },
          borderRadius: BorderRadius.circular(30),
          highlightColor: Colors.blue.withOpacity(0.4),
          splashColor: Colors.green.withOpacity(0.5),
          child: Ink(
            color: Colors.orange,
            child: Container(
              //color: Colors.orange,
              alignment: Alignment.center,
              child: Text(
                "test",
                style: TextStyle(fontSize: 16),
              ),
            ),
          ),
        ),
      ),
    );