Using ContinuousRectangleBorder (AKA Squircle, Superellipse) as a mask in Flutter

Question

Can a ContinuousRectangleBorder (AKA Squircle, Superellipse) shape be used as a template for masking another widget?

Context

I'm trying to mask a widget using ClipRRect but the customization options it offers only include traditional border radius which doesn't quite generate the same shape as a container decorated with ContinuousRectangleBorder

Example:

In this approach, the ClipRRect destroys completely the original shape of the ContinuousRectangleBorder if its radius is too big, if it is too small it won't clip both the filter and the container appropiately. I tried with elliptical radiuses but still it does not look as expected

  ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(40)),
      child: BackdropFilter(
        
        // Filter
        filter: ImageFilter.blur(
          sigmaX: 20,
          sigmaY: 20,
        ),

        // Container with ContinuousRectangleBorder
        child: Container(
          constraints: BoxConstraints(maxWidth: 600),
          decoration: ShapeDecoration(
            color: Colors.blue,
            shape: ContinuousRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(80)),
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.all(30.0),
            child: Text("Hola World"),
          ),
        ),
      ),
    );

What I've Tried

I tried using an Stack with two layers:

Stack

|- Layer 1: BackdropFilter inside a traditional ClipRRect hoping to simulate the shape of the ContinuousRectangleBorder behind the real ContinuousRectangleBorder without affecting the real geometry of it.

|- Layer 2: ContinuousRectangleBorder decoration to the final Container.

The problem with this approach is that I could not find a way for the widget within the Layer 1 to occupy the entire width and height of its brother in Layer 2

Hypothesis

1. Stack: I think this is the closest I've been to solve this case, but it is not the best solution since it simulates the result. (And I'm still stuck where I can't make the Layer 1 container to fill all the space available in the stack.

2. I read about about the ClipPath widget but it takes a Path as an argument and I have not been able to convert the ShapeDecoration to that type and use it as a mask.

3. It may be another way to create the ContinuousRectangleBorder look in order to use it as a mask and a container? I found it is also called squircle / superellipse but the packages and solutions to recreate it use a ShapeDecoration just as ContinuousRectangleBorder does.

4. Maybe an alternative way to make a mask that takes the ContinuousRectangleBorder as an argument and wraps its child?

Open discussion

I'm aware the last 2 hypothesis are a bit far from the original question but I'm open to make things in other ways.

Thank you all for your help.

Answer 1

Thanks to @pskink advice, the correct way to achieve this is by using a ClipPath and passing the ContinuousRectangleBorder as a shape of a ShapeBorderClipper

Example:

    ClipPath(
      clipper: ShapeBorderClipper(
        shape: ContinuousRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(80),
          ),
        ),
      ),
      child: Text("Hola World"),
    );