How to constrain width of ClipRRect image?

Question

There are several posts, like this one, describing how to add rounded corners to an images using ClipRRect. They're working for me except my images aren't constraining properly in width. E.g., my attempt at a square image below

ListView(                       // <- Works fine when not in ListView?
 children: <Widget>[
Padding(
  padding: const EdgeInsets.all(8.0),
  child: GestureDetector(
    onTap: () => _getFromGallery(),
    child: Container(
      color: Colors.blue,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(50.0), //or 15.0
        child: CachedNetworkImage(
          imageUrl: image,
          height: 150.0,
          width: 150.0,
          fit: BoxFit.cover,
        ),
      ),
    ),
  ),
),
]

has the proper height but the width expands the whole device screen, like this?

EDIT

This attempt

return Container(
    height: 150.0,
    width: 150.0,
    color: Colors.blue,
    child: ClipRRect(
      borderRadius: BorderRadius.circular(50.0), //or 15.0
      child: CachedNetworkImage(
        imageUrl: image,
        height: 150.0,
        width: 150.0,
        fit: BoxFit.fill,
      ),
    ),
  );

Created this

EDIT #2

Image with no ListView

@tanharpatel, I added your suggestions above but unfortunately still no joy — buttonsrtoys, Mar 13 '21 at 20:31
@AnisAlibegić A GestureDetector. I update my OP to show it. The Padding widget is in a ListView — buttonsrtoys, Mar 13 '21 at 20:36
I went further up the tree and ListView seems to be buggering things up. (I updated my original post to show my ListView). Renders fine when removed? I'll add the pic showing no ListView — buttonsrtoys, Mar 13 '21 at 20:46

buttonsrtoys · Answer 1 · 2021-03-14T01:17:57.427

2

From the description of ListView, "In the cross axis, the children are required to fill the ListView." So, ListView was expanding my container? Either way, wrapping Padding in a Center widget fixed it.

edited Mar 14 '21 at 01:17

answered Mar 13 '21 at 21:49

buttonsrtoys

2,359
3
32
52

How to constrain width of ClipRRect image?

1 Answers1