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