Reputation: 5932
I made this widget :
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 200,
height: 200,
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.grey,
),
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 4.0,
mainAxisSpacing: 2.0,
children: <Widget>[
Container(
color: Colors.red,
),
Container(
color: Colors.red,
),
Container(
color: Colors.red,
),
Container(
color: Colors.red,
),
],
))
],
),
and this result is:
Now how can cut 4 square's edges according it's parent shape?
Upvotes: 0
Views: 811
Reputation: 651
You can achieve this using ClipOval.
Wrap your grey container with it :
ClipOval(
child:Container(
//Your grey container
),
),
Upvotes: 4