I have used ClipRRect for rounded corners in the UI. The ClipRRect wraps topContent and bottomContent are a stack and a Column respectively. But, the bottom corners are not round. What may be the reason behind this?

this is the screenshot

The cardModel class is used to store the image path in this case.

    class FeaturedCard extends StatelessWidget {
     final FeaturedCardModel cardModel;
     final double parallaxPercent;

  FeaturedCard({
    this.cardModel,
    this.parallaxPercent = 0.0, //default value
  });

  @override
  Widget build(BuildContext context) {
    final topContent = Stack(
      children: <Widget>[
        Container(
            padding: EdgeInsets.only(
              left: 10.0,
            ),
            height: MediaQuery.of(context).size.height * 0.3,
            decoration: new BoxDecoration(
              image: new DecorationImage(
                image: new AssetImage(cardModel.imgUrl),
                fit: BoxFit.fill,
              ),
            )),
      ],
    );

    final bottomContentText = Text(
      'This is the sample text',
      style: TextStyle(fontSize: 18.0),
    );

    final bottomContent = Container(
      height: MediaQuery.of(context).size.height * 0.5,
      width: MediaQuery.of(context).size.width,
      color: Colors.white,
      padding: EdgeInsets.all(40.0),
      child: Center(
        child:
            bottomContentText,
        ),
      );

    return ClipRRect(
      borderRadius: BorderRadius.circular(16.0),
      child: Column(
        children: <Widget>[
          topContent,
          bottomContent,
        ],
      ),
    );
   }
  }


Solution 1: chemamolins

If you go to Flutter Inspector and do "Toggle Debug Paint" you will see that the clipping occurs in the blue area below.

You can fix it by giving a size to your clipper.

return SizedBox(
  height: MediaQuery.of(context).size.height * 0.8,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(16.0),
    child: Column(
      children: <Widget>[
        topContent,
        //bottomContent,
      ],
    ),
  ),
);


Solution 2: Mahdi Arabpour

The column that is the child of ClipRRect is taking as much space as it can get. so the border radius is applied to the bottom of the screen. to solve that you just need to set mainAxisSize property of Column to MainAxisSize.min:

return ClipRRect(
      borderRadius: BorderRadius.circular(16.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          topContent,
          bottomContent,
        ],
      ),
    );