Decoration borderradius of container destroyed by child container-CodePudding

I got this code

Container(
  width: 100.w,
  decoration: BoxDecoration(
      borderRadius: BorderRadius.only(topLeft: Radius.circular(12.sp), topRight: Radius.circular(12.sp)), color: Colors.green),
  child: UnconstrainedBox(
    alignment: Alignment.centerLeft,
      child: Container(
          padding: EdgeInsets.all(12.sp),
          child: Text(
            "my Text",
            style: TextStyle(fontSize: 12.sp),
          ))),
),

which results in this:

Now I want to have my child container with another background color taking a specific width of the parent container. I use this code (unconstrainedbox so that my width ist not 100% automatically):

Container(
  width: 100.w,
  decoration: BoxDecoration(
      borderRadius: BorderRadius.only(topLeft: Radius.circular(12.sp), topRight: Radius.circular(12.sp)), color: Colors.green),
  child: UnconstrainedBox(
    alignment: Alignment.centerLeft,
      child: Container(
        color: Colors.red,
        width: 75.w,
          padding: EdgeInsets.all(12.sp),
          child: Text(
            "my Text",
            style: TextStyle(fontSize: 12.sp),
          ))),
),

which results in this:

I need the borderradius of the parent container to be dominant and not being 'destroyed' by its child. How can I achieve that? I can't just add the same decoration to the child because the width will grow dynamically and on some point it would be at almost 100% what would result in problems on the right side.

CodePudding user response：

This can be achieved with clipBehavior property in Container.

Updated code:

Container(
  width: 100.w,
  clipBehavior: Clip.hardEdge,
  decoration: BoxDecoration(
      borderRadius: BorderRadius.only(topLeft: Radius.circular(12.sp), topRight: Radius.circular(12.sp)), color: Colors.green),
  child: UnconstrainedBox(
    alignment: Alignment.centerLeft,
      child: Container(
        color: Colors.red,
        width: 75.w,
          padding: EdgeInsets.all(12.sp),
          child: Text(
            "my Text",
            style: TextStyle(fontSize: 12.sp),
          ))),
),

output:

CodePudding user response：

Try using shape : Boxshape.circle parameter for the parent container Else in clipbehaviour of container give clip.hardEdge so that parent container maintains its border radius.

CodePudding user response：

As I understand your problem you want to set child border as parent border without using decoration.For this Wrap your UnconstrainedBox with the widget ClipRRect and add border radius it will cover up your problem. Just like below

ClipRRect( borderRadius: BorderRadius.only(topLeft: Radius.circular(12),), child: UnconstrainedBox( alignment: Alignment.centerLeft, child: Container( color: Colors.red, width: 75, padding: EdgeInsets.all(12), child: Text( "my Text", style: TextStyle(fontSize: 12), ))),),