The simplest way to do this is by using an overlap and ClipRect.
The OverFlowBox allows the circle to draw outside the bounds of its parent, and then the ClipRect cuts it back to the edge.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title:Text('Mask a container',style:TextStyle(color:Colors.black)),
centerTitle: true,
),
body: Center(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
child: ClipRect(
clipBehavior: Clip.hardEdge,
child: OverflowBox(
maxHeight: MediaQuery.of(context).size.width * 1.2,
maxWidth: MediaQuery.of(context).size.width * 1.2,
child: Center(
child: Container(
decoration: BoxDecoration(
color: Color(0xff9e563f),
shape: BoxShape.circle,
),
child: Center(
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
child: Icon(Icons.add))),
),
),
),
),
),
));
}
Thank you for sharing this helpful tutorial on trimming a container in Flutter using ClipRect and OverflowBox. Your clear explanations and code examples make it easy to understand and implement. I appreciate your effort in providing such valuable information!