CODEWITHSUNDEEP
flutterdartflutter-layout
user2876983
user2876983

Reputation: 321

Border radius of container inside card

When I try to set the border radius of the top two corners of my container that is nested inside a card, the whole content of the container goes disappears. Here is my code, if you uncomment the commented line your whole content inside the container will go away.

Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(5.0),
      ),
      margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
      child: Container(
        decoration: BoxDecoration(
          border: new Border(
              top: BorderSide(
            color: Theme.of(context).primaryColor,
            width: 3.0,
          )),
          //borderRadius: BorderRadius.only(topLeft: const Radius.circular(5.0)),
        ),
        child: makeListTile(widget.flight),
      ),
    );

}

Upvotes: 11

Views: 11933

Answers (2)

Ali mohammadi
Ali mohammadi

Reputation: 1899

Just add 

clipBehavior: Clip.antiAlias

To Card

Upvotes: 33

Mahesh Jamdade
Mahesh Jamdade

Reputation: 20399

      Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20.0),
        ),
        margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
        child: Container(
          decoration: BoxDecoration(
            border: new Border(
                top: BorderSide(
              color: Theme.of(context).primaryColor,
              width: 3.0,
            )),
            borderRadius: BorderRadius.only(topLeft: const Radius.circular(20.0)),
            color: Colors.red,
          ),
          height: 100,
          width: 100,
        ),
      )

I tried your code it works fine its only that the corner is getting hidden due to the card's corner look you have specified same radius for container and card,I just added a width and height to container and increased the circular radius to make the change visible,

enter image description here

I dont know why you are using the container inside a card if you want a card with only lefttop corner circular then you can do this by the below code,I recommend you to look at the ways of creating cards in flutter

SizedBox.expand(
          child: Card(
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.only(topLeft: Radius.circular(20)),
              side: BorderSide(width: 2.5, color: Colors.black)),
               margin: EdgeInsets.all(10),
        ),
        )

enter image description here

if you have any questions feel free to comment

Upvotes: 9

Related Questions