Matching Width of Positioned Container to Container in Stack

Question

I'm having issues getting the positioned container to match the width of the first container. Essentially, I want the original container to be as wide as possible hence the width is set to double.infinity. The positioned container is meant to be an overlay to help with the visibility of the text that is stacked on top of the original container. However, the issue here is if I set the width of the overlay container to double.infinity I get an error saying BoxConstraints forces an infinite width. So right now I set the width to the size of the screen...but we can see that the border radius isn't drawn because it's too large.

How do I get the overlay container to match the original container containing the image?

Stack activityDetails(BuildContext context) {
  var smallRadius;
  return Stack(
    children: <Widget>[
      ClipRRect(
        borderRadius: smallRadius,
        child: Container(
          width: double.infinity,
          height: 200,
          child: CachedNetworkImage(
            imageUrl: image,
            fit: BoxFit.cover,
          ),
        ),
      ),
      Positioned(
        top: 0,
        left: 0,
        child: Container(
          width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10.0),
              topRight: Radius.circular(10.0),
              bottomLeft: Radius.circular(0),
              bottomRight: Radius.circular(0),
            ),
          ),
          child: Text(
            category.toUpperCase(),
          ),
        ),
      ),
    ],
  );
}

Answer 1

If the sole goal is to only have the above display then I would suggest you replace the contents of your Positioned with this code and remove the entire ClipRRect chunk

Container(
      decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(30),
      image: const DecorationImage(
        image:NetworkImage('src'),
        fit:BoxFit.cover,
        ),
      ),
      width: double.infinity,
      height: 200,
      child: Row(
        crossAxisAlignment:CrossAxisAlignment.start,
        children:const[
          Text('Events'),
        ],
      ),
    ),

Remember to put it inside the Positioned() and edit the necessary parts like Cached and the Text() removing the const flag

However, if you still want to stick to this approach then I would suggest you try moving the Positioned top down by a few pixels