I can't set BorderRadius on Ink.image

Question

I can't seem to add BorderRadius to Ink.image image. I am able to add BorderRadius to all the other widges on top of the image (you can see that the container has BorderRadius but the image doesn't). What do I do? Do I need to reprogram this with another widget?

@override
Widget build(BuildContext context) {
  return Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20),
    ),
    child: Ink.image(
      image: AssetImage(
        bgImage,
      ),
      fit: BoxFit.cover,
      child: InkWell(
        borderRadius: BorderRadius.circular(20),
        onTap: () {
          Navigator.of(context, rootNavigator: true).push(
            CupertinoPageRoute<bool>(
              fullscreenDialog: true,
              builder: (BuildContext context) => FP(),
            ),
          );
        },
        child: Center(
          child: Text(
            title,
            style: TextStyle(
                color: Colors.white,
                fontSize: 30,
                fontWeight: FontWeight.bold),
          ),
        ),
      ),
    ),
  );
}

You can see how there is a barely but visible border radius. I just need the image to have it as well.

Answer 1

Use regular Ink with a decoration.borderRadius property.

Here is your updated code

Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
      ),
      child: Ink(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          image: DecorationImage(
            image: AssetImage(
              bgImage,
            ),
            fit: BoxFit.cover,
          ),
        ),
        child: InkWell(
          borderRadius: BorderRadius.circular(20),
          onTap: () {
            Navigator.of(context, rootNavigator: true).push(
              CupertinoPageRoute<bool>(
                fullscreenDialog: true,
                builder: (BuildContext context) => FP(),
              ),
            );
          },
          child: Center(
            child: Text(
              title,
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 30,
                  fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
    );

Answer 2

Wrap your Ink.image with a Material widget and then wrap the Material with a ClipRRect widget and set the borderRadius.

For example:

ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: Material(
    child: Ink.image(
      image: const AssetImage('image.png'),
      child: InkWell(
        onTap: () {},
      ),
    ),
  ),
),

This answer inspired by this comment in GitHub.