I’m trying to implement a card swiping UI just like Tinder, and make the swipe cards vertical scrollable. I manage to make it but there’s problem:

The pink rectangle is

Container(color: Colors.pink, height: 100),

as an indicator of where’s the last widget of the column.

This is the card scrolled to bottom. We can see that there’s a blue background even outside the Container with BoxDecoration. The Container is:

SingleChildScrollView(
      key: UniqueKey(),
      physics: ClampingScrollPhysics(),
      child: Container(
        height: 1200,
        clipBehavior: Clip.antiAlias,
        decoration:  BoxDecoration(
          border: Border.all(),
          borderRadius: BorderRadius.all(Radius.circular(10)),  // Here's the rounded corner comes from
          color: const Color.fromARGB(255, 99, 185, 225), // here's the blue background.
        ),
        child: /* A column with some widgets and ends with that pink container*/

As far as I understand, the pink Container show that it’s clipping correctly because its rounded, and under no circumstance the background color should go outside the border?

If this is intended behavior, why is that? Also, what is the most proper workaround? Simply add another container used as background color?

I don’t really have a clue what is happening so there’s not much I can try. I’d rather get a better understanding to the problem than use a workaround for now.

I expect the background color defined in BoxDecoration will be clipped by the same BoxDecoration, and at least not go outside of its own parent.