Flutter 使容器抖动

我想剪辑一个容器，如所附图像所示。

谢谢。

您可以使用绘制一个，并且只将其一半渲染为“凹口”

ClipRect(
子：容器(
颜色：Colors.lightBlueAccent，
身高：50，
宽度：200，
孩子：定制油漆(
painter:CustomPaintNotch（），
),
),
),
...
类CustomPaintNotch扩展CustomPainter{
@凌驾
空心油漆（帆布，尺寸）{
var paint=paint（）
…颜色=颜色。绿色；
偏移中心=偏移（尺寸.宽度/2,0）；
//作为槽口，将使用偏移绘制RECT
//使用ClipRect后，将不会渲染区域外的油漆
RRect roundRectangle=RRect.fromRectAndRadius(
垂直于中心（中心：中心，宽度：100.0，高度：40.0），
半径。圆形（20.0））；
画布.绘制正确（圆形矩形，绘制）；
}
@凌驾
布尔应重新绘制（协变自定义代理）{
返回false；
}
}

CustomPaintNotch在容器小部件的顶部中心部分的边缘绘制一个圆形矩形。由于使用了ClipRect，因此不会渲染该区域以外的油漆。这将是矩形的槽口

下面是呈现小部件时的外观

完整样本

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：MyHomePage（标题：“颤振演示主页”），
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（widget.title），
),
正文：中(
//使用了ClipRect，因此不会渲染ClipRect区域以外的油漆
孩子：ClipRect(
子：容器(
颜色：Colors.lightBlueAccent，
身高：50，
宽度：200，
孩子：定制油漆(
painter:CustomPaintNotch（），
),
),
),
),
);
}
}
类CustomPaintNotch扩展CustomPainter{
@凌驾
空心油漆（帆布，尺寸）{
var paint=paint（）
…颜色=颜色。绿色；
偏移中心=偏移（尺寸.宽度/2,0）；
//作为槽口，将使用偏移绘制RECT
//使用ClipRect后，将不会渲染区域外的油漆
RRect roundRectangle=RRect.fromRectAndRadius(
垂直于中心（中心：中心，宽度：100.0，高度：40.0），
半径。圆形（20.0））；
画布.绘制正确（圆形矩形，绘制）；
}
@凌驾
布尔应重新绘制（协变自定义代理）{
返回false；
}
}

使用ClipRect进行计算！是底部酒吧吗？也许你需要@KirillMatrosov-Yaa，但不完全是因为不想使用BottomAppBar，我知道它有形状参数。我想制作一个自定义小部件。@diegoveloper我试着做数学题，但无法得到确切的形状。我同意其他评论。首先创建CustomPainter（您可以复制粘贴），然后从1角开始…并从线到线到线到线。。直到你到达第一点。