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

question from:https://stackoverflow.com/questions/65598454/how-to-clip-one-container-over-another-in-flutter

Answer 1

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