How to clip one container over another in flutter?

Question

I want to build a reusable card widget, it will have an image and text with some custom design layout. I tried everything I could, but wasn't able to achieve the desired result. Any help would be much appreciated.

This is what I want to do

I'm stuck here

This is my code

class ReusabelCard extends StatelessWidget {
      ReusabelCard(
          {this.cardChild, @required this.assetImagePath, @required this.cardText});
      final Widget cardChild;
      final String assetImagePath;
      final String cardText;
      @override
      Widget build(BuildContext context) {
        return Container(
            height: MediaQuery.of(context).size.height * 0.35,
            width: MediaQuery.of(context).size.width * 0.5,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(MediaQuery.of(context).size.width * 0.5 * 0.28),
            ),
            child: Stack(
              children: [
                LayoutBuilder(
                  builder: (context, contraint) {
                    return Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Icon(
                          Icons.trip_origin,
                          size: contraint.biggest.width,
                          color: Colors.grey[300],
                        ),
                        Container(
                          height: MediaQuery.of(context).size.height*0.05,
                          width: MediaQuery.of(context).size.width,
                          color: Colors.green,
                        ),
                      ],
                    );
                  },
                ),
              ],
            )
            
            );
      }
    }

Solution

Use ClipRRect to do it:

ClipRRect(
  borderRadius: BorderRadius.circular(50.0), //clipping the whole widget
  child: Container(
    height: MediaQuery.of(context).size.height * 0.4, //I adjusted here for responsiveness problems on my device
    width: MediaQuery.of(context).size.width * 0.5,
    color: Colors.white,
    child: LayoutBuilder(
      builder: (context, constraint) {
        return Stack(
          children: [
            Center(
              child: Icon(
                Icons.trip_origin,
                size: constraint.biggest.width,
                color: Colors.grey[300],
              ),
            ),
            Positioned(
              right: 0,
              left: 0,
              top: 20.0,
              child: Icon(
                Icons.sports_volleyball_rounded, //just to represent the ball
                size: constraint.biggest.width * 0.5,
              ),
            ),
            Positioned(
              bottom: 0.0,
              child: Container(
                alignment: Alignment.center,
                height: MediaQuery.of(context).size.height * 0.1,
                width: constraint.biggest.width,
                color: Colors.yellow[700],
                child: Text(
                  'Sports',
                  style: Theme.of(context)
                      .textTheme
                      .headline3
                      .copyWith(color: Colors.white),
                ),
              ),
            ),
          ],
        );
      },
    ),
  ),
);

Comments

[Try]

Glad i can help!