Put container child inside container border-CodePudding

i want to put a few color widget inside a container with rounded border the number of child is dynamic. in my code the children widget shows on top of border and get messy. i want my children (colored) widget inside border so i get a rounded progress bar.

Scaffold(
        body: Center(
          child: Container(
            height: 40,
            width: 302,
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(
                Radius.circular(8.0),
              ),
              border: Border.all(
                width: 1,
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  height: 40,
                  width: 180,
                  color: Colors.green,
                  child: const FittedBox(
                    child: Text(
                      '60%',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
                Container(
                  height: 40,
                  width: 90,
                  color: Colors.blue,
                  child: const FittedBox(
                    child: Text(
                      '30%',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
                Container(
                  height: 40,
                  width: 30,
                  color: Colors.red,
                  child: const FittedBox(
                    child: Text(
                      '10%',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      )

PS: I don't want to change children widget border because children widget number is dynamic from 0~10.

CodePudding user response：

As far as I understood, you do not want container, but ClipRRect to clip content to be rounded, i.e. smth like this:

...
child: DecoratedBox(
      position: DecorationPosition.foreground,
      decoration: BoxDecoration(
        borderRadius: borderRadius,
        border: Border.all(
          width: borderWidth,
          color: Colors.amber,
        ),
      ),
      child: ClipRRect(
        borderRadius: borderRadius,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: contentWidgets,
        ),
      )
...

though, in my opinion better approach would be to add rounded bg with content padding, so we will not have clip holes with scaffold bg in them between clipped content and container border, smth like this:

...
child: DecoratedBox(
          decoration: BoxDecoration(
            borderRadius: borderRadius,
            color: Colors.amber,
          ),
          child: Padding(
            padding: EdgeInsets.all(borderWidth),
            child: ClipRRect(
              borderRadius: borderRadius,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: contentWidgets,
              ),
            ),
          ),
        )
...

working example can be found here