Flutter 如何使容器的圆角外部透明？

我有一个用Dismissible包装的容器，容器和Dismissible背景都有自己的角落。 我的问题是，即使容器顶部的角落被切割，原本应该是角落的空间也是白色的，而不是透明的

以下是我所拥有的与我想要的（用油漆制作）

我试着到处乱涂，但没有成功

以下是完整的代码：

导入“包装：颤振/材料.省道”；
类测试扩展了StatefulWidget{
@凌驾
_TestState createState（）；
}
类_TestState扩展状态{
静态常数半径_borderRadius=常数半径。圆形（65.0）；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：中(
孩子：可鄙(
key:ValueKey（“hmm”），
背景：集装箱(
装饰：盒子装饰(
边框：边框。全部（颜色：Colors.red，宽度：3），
borderRadius:borderRadius.all（_borderRadius），
颜色：颜色，白色，
),
),
第二背景：容器(
装饰：盒子装饰(
边框：边框。全部（颜色：Colors.red，宽度：3），
borderRadius:borderRadius.all（_borderRadius），
颜色：颜色，白色，
),
),
子：容器(
宽度：300，
身高：200，
装饰：康斯特盒子装饰(
borderRadius:borderRadius.all（_borderRadius），
梯度：线性梯度(
颜色：[颜色。蓝色，颜色。粉色]，
开始：Alignment.topCenter，
结束：对齐。底部中心，
)),
),
)),
);
}
}

找到

问题在于dismissible.dart中的剪裁行为。我通过编辑Dismissible类本身解决了这个问题。在第559-573行中，您会发现一个if语句，如下所示：

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（背景！=null）{
内容=堆栈（子项：[
如果（！\u moveAnimation.isdissed）
定位填充(
孩子：ClipRect(
克利伯：解雇克利伯(
轴：_方向X轴？轴。水平：轴。垂直，
moveAnimation:_moveAnimation，
),
孩子：背景，
),
),
内容,，
]);
}

---

如果您只是在ClipRect中注释掉clipper属性，则背景将是透明的，并且不会丢失正在折叠的动画。

您可以通过将背景移出可忽略的对象来解决此问题：

完整源代码：

导入“包装：颤振/材料.省道”；
void main（）{
runApp(
材料聚丙烯(
debugShowCheckedModeBanner:false，
标题：“颤振演示”，
主页：主页（），
),
);
}
类主页扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：Test（），
);
}
}
类测试扩展了StatefulWidget{
@凌驾
_TestState createState（）；
}
类_TestState扩展状态{
静态常数半径_borderRadius=常数半径。圆形（65.0）；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：堆栈(
儿童：[
居中(
子：容器(
宽度：300，
身高：200，
装饰：盒子装饰(
边框：边框。全部（颜色：Colors.red，宽度：3），
borderRadius:borderRadius.all（_borderRadius），
颜色：颜色，白色，
),
),
),
不屑一顾(
key:ValueKey（“hmm”），
儿童：中心(
子：容器(
宽度：300，
身高：200，
装饰：康斯特盒子装饰(
borderRadius:borderRadius.all（_borderRadius），
梯度：线性梯度(
颜色：[颜色。蓝色，颜色。粉色]，
开始：Alignment.topCenter，
结束：对齐。底部中心，
),
),
),
),
),
],
),
);
}
}

可能会有帮助-谢谢，这样做很有效，但因为它会删除动画，所以另一种解决方案更可取。虽然这确实有效，但我强烈建议不要编辑核心文件和功能。每当您决定升级颤振时，您要么因为冲突而无法升级……要么每次都会被覆盖。您应该做的是将该可撤销文件复制到您自己的项目中，重命名小部件，然后使用它。

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