Cyrus the Great
Cyrus the Great

Reputation: 5932

Flutter: Cut widget edges according it's parents

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:

enter image description here

Now how can cut 4 square's edges according it's parent shape?

Upvotes: 0

Views: 811

Answers (1)

Tom Rivoire
Tom Rivoire

Reputation: 651

You can achieve this using ClipOval.

Wrap your grey container with it :

ClipOval(
    child:Container(
        //Your grey container
    ),
),

Upvotes: 4

Related Questions