Ripple effect is not showing on full area

Question

Inkwell Ripple effect is not showing the full area of content. In my scenario, I have a column that contains a container with a color that can't make as transparent after a container there is a simple text widget. I wrapped the inkwell with full content, When I tapped on the content ripple effect showed only the text area, and some transparent area ripple effect not showing on the top container which has height, width, and a specific color. The especially problem is here ripple not showing on the container area. I wanted to show a ripple effect on the full area of content.

There are some solutions to this topic. Here below I have attached some links I've tried their solutions.

InkWell not showing ripple effect

Inkwell not showing ripple when used with Container decoration

When using Flutter Container, everything ok but no ripple effect - but Ink draws beyond its parent

My code:

class LayoutSizeItem extends StatelessWidget {
  const LayoutSizeItem({super.key});
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 4.0),
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: () {},
            splashColor: Colors.pink,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                SizedBox(
                  height: 80.0,
                  child: AspectRatio(
                    aspectRatio: 1.5,
                    child: Container(
                      color: Colors.grey[700],
                    ),
                  ),
                ),
                const SizedBox(
                  height: 4.0,
                ),
                const Text(
                  "(1400x1440)\n1:1",
                  textAlign: TextAlign.center,
                  style: TextStyle(fontWeight: FontWeight.w300, fontSize: 10.0),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

you need to change the Container to Ink, here is my code.

class LayoutSizeItem extends StatelessWidget {
  const LayoutSizeItem({super.key});
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 4.0),
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: () {},
            splashColor: Colors.pink,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                SizedBox(
                  height: 80.0,
                  child: AspectRatio(
                    aspectRatio: 1.5,
                    child: Ink( /// use Ink instead, not Container
                      color: Colors.grey[700],
                    ),
                  ),
                ),
                const SizedBox(
                  height: 4.0,
                ),
                const Text(
                  "(1400x1440)\n1:1",
                  textAlign: TextAlign.center,
                  style: TextStyle(fontWeight: FontWeight.w300, fontSize: 10.0),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}