A problem in using ClipRRect() in Flutter

user_9502615 0
Viewed 11080

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,
        ],
      ),
    );
   }
  }
flutter-layout dart flutter
2 Answers

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

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