How to fix this dismissible widget border

Question

I have a problem with a dismissible border which is marked on the screenshot

https://imgur.com/a/Jv0sdi2

return Dismissible(
    child: Container(
        height: 256,
        decoration: ShapeDecoration(
            shape: RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(20.0)
            )
        )
    );
);

Answer 1

I've encountered the same problem when I was trying to have rounded corners.

Eventually a little workaround did the trick.

Instead of having a background in the Dismissible, create a Stack and put the background widget behind the Dismissible

Stack(
  overflow: Overflow.clip,
  children: <Widget>[
    MyBackgroundWidget(), // instead of background
    Dismissible(
      child: MyForegroundWidget(),
      // no background
    )
  ],
);

Answer 2

The problem is the clipping behavior in dismissible.dart. I've managed to solve the problem by editing the Dismissible class itself. In lines 559 - 573, you will find an if-statement that looks like this:

if (background != null) {
      content = Stack(children: <Widget>[
        if (!_moveAnimation.isDismissed)
          Positioned.fill(
            child: ClipRect(
              clipper: _DismissibleClipper(
                axis: _directionIsXAxis ? Axis.horizontal : Axis.vertical,
                moveAnimation: _moveAnimation,
              ),
              child: background,
            ),
          ),
        content,
      ]);
    }

If you just comment out the clipper-property in ClipRect, the background will be transparent and you won't lose the collapsing animation.

Answer 3

I found a solution. Wrap Dismissible widget with ClipRRect widget, and remove borderRadius from, child widgets. Only ClipRRect should have borderRadius.

ClipRRect(
  borderRadius: BorderRadius.circular(15.0),
  child: Dismissible(
    child: YourWidgetContainer();
 )
)