如何使容器在他的圆角之外变得透明？

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,
              )),
        ),
      )),
    );
  }
}

Answer 1

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.

Answer 2

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,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}