我在用ClipPath
虽然包含的答案已被使用ColorFilter
.
更改滑块值以更改孔尺寸
Run on dartPad
class WidgetHole extends StatefulWidget {
const WidgetHole({Key? key}) : super(key: key);
@override
State<WidgetHole> createState() => _WidgetHoleState();
}
class _WidgetHoleState extends State<WidgetHole> {
double dimension = 52;
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) => Scaffold(
backgroundColor: Colors.pink,
appBar: AppBar(
backgroundColor: Colors.purple,
title: Slider(
value: dimension,
max: constraints.maxWidth,
onChanged: (v) {
setState(() {
dimension = v;
});
},
),
),
body: ClipPath(
clipper: CenterHolePath(dimension: dimension),
child: Container(
alignment: Alignment.center,
color: Colors.yellow,
child: Column(
children: [
Text("Hey this is background"),
Expanded(
child: ListView.builder(
clipBehavior: Clip.hardEdge,
itemCount: 44,
itemBuilder: (context, index) {
return Center(
child: SizedBox(
height: kToolbarHeight,
child: Text("lItem $index"),
),
);
},
))
],
),
),
),
),
);
}
}
class CenterHolePath extends CustomClipper<Path> {
final double dimension;
CenterHolePath({
required this.dimension,
});
@override
Path getClip(Size size) {
final rect = Rect.fromLTRB(0, 0, size.width, size.height);
final path = Path()
..fillType = PathFillType.evenOdd
..addOval(
Rect.fromCenter(
center: Offset(size.width / 2, size.height / 2),
width: dimension,
height: dimension),
)
..addRect(rect);
return path;
}
@override
bool shouldReclip(covariant CenterHolePath oldClipper) {
return dimension != oldClipper.dimension;
}
}
粉色是脚手架背景