How do I make a Container Transparent outside of his rounded corners?

Question

I have a container wrapped in Dismissible, both the container and dismissible background have their corners cut. My problem is that even though the corner of the container on top is cut the space that would have been the corner is white instead of transparent.

Here's What I have vs What I want (made on paint)

I tried throwing Colors.transparent around but had no success.

Here is the full code:

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  static const Radius _borderRadius = const Radius.circular(65.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Dismissible(
        key: ValueKey("hmm"),
        background: Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.red, width: 3),
            borderRadius: BorderRadius.all(_borderRadius), 
            color: Colors.white,
          ),
        ),
        secondaryBackground: Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.red, width: 3),
            borderRadius: BorderRadius.all(_borderRadius), 
            color: Colors.white,
          ),
        ),
        child: Container(
          width: 300,
          height: 200,
          decoration: const BoxDecoration(
              borderRadius: BorderRadius.all(_borderRadius),
              gradient: LinearGradient(
                colors: [Colors.blue, Colors.pink],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              )),
        ),
      )),
    );
  }
}

probably will help - https://stackoverflow.com/questions/57542470/how-to-fix-this-dismissible-widget-border/64417315 — Mol0ko, Feb 24 '21 at 08:32

score 1 · Accepted Answer · answered Feb 24 '21 at 08:40

Found here

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.

While this does work, I'd HIGHLY advise against editing core files and functionality. Whenever you decide to upgrade flutter, you will either be unable to because of conflicts...or this will get overwritten every time. What you should do is copy that dismissable file into your own project, rename the widget, and use that. — ReyHaynes, Mar 01 '21 at 00:16

score 1 · Answer 2 · answered Feb 24 '21 at 08:51

You can fix this by using moving your background out of your Dismissible:

Full source code:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Test(),
    );
  }
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  static const Radius _borderRadius = const Radius.circular(65.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Center(
            child: Container(
              width: 300,
              height: 200,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 3),
                borderRadius: BorderRadius.all(_borderRadius),
                color: Colors.white,
              ),
            ),
          ),
          Dismissible(
            key: ValueKey("hmm"),
            child: Center(
              child: Container(
                width: 300,
                height: 200,
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(_borderRadius),
                  gradient: LinearGradient(
                    colors: [Colors.blue, Colors.pink],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Thanks that works but since it removes the animation another solution is preferable. — miguel alves miguel, Feb 24 '21 at 09:10

How do I make a Container Transparent outside of his rounded corners?

2 Answers2

Full source code: