CODEWITHSUNDEEP
listviewflutter
marcin
marcin

Reputation: 399

does flutter respect border radius of parent?

I have a stateless widget with this builder function:

Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.red,
      ),
      margin: EdgeInsets.only(
          top: widget.position.dy, left: 5, right: 5, bottom: 200),
      child: ListView(
        padding: EdgeInsets.only(bottom: 70),
        shrinkWrap: true,
        children: <Widget>[
          Container(height: 60, color: Color(0x8500ffff)),
        ],
      ),
    );
}

basically one ListView inside a Container widget. the Container has BorderRadius.circular(20). The list vie item is a simple Container.

Now - when I scroll the list view, the border radius of the parent container is not respected.

enter image description here

Is that correct behaviour or do I make a mistake?

Thanks

Upvotes: 0

Views: 2127

Answers (2)

divillysausages
divillysausages

Reputation: 8053

For anyone coming across this now, you need to wrap your ListView in a ClipRRect with the same border radius as your parent container

So something like this should work:

Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.red,
      ),
      margin: EdgeInsets.only(
          top: widget.position.dy, left: 5, right: 5, bottom: 200),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: ListView(
            padding: EdgeInsets.only(bottom: 70),
            shrinkWrap: true,
            children: <Widget>[
              Container(height: 60, color: Color(0x8500ffff)),
            ],
          ),
        ),
    );
}

Upvotes: 1

Mazin Ibrahim
Mazin Ibrahim

Reputation: 7889

You have to define borderRadius for your listview children widgets, I faced the same issue before and I managed to solve it by doing that. So you should modify your ListView widget:

 child: ListView(
 padding: EdgeInsets.only(bottom: 70),
 shrinkWrap: true,
 children: <Widget>[
   Container(
 height: 60,
 decoration: BoxDecoration(
 borderRadius: BorderRadius.circular(20),
 color: Color(0x8500ffff)),
 ), 
 ],
),

Upvotes: 1

Related Questions