flutter - Widget outside of parents Border(Radius)

Question

I am trying to get a line indicating progress to work. I use the LinearProgressIndicator-Widget. My structure looks roughly like this:

 Container( // outer Container
    width: widgetWidth,
    decoration: BoxDecoration(
        color: lectionColor, 
        borderRadius: BorderRadius.circular(10)),
    child: Column(children[
        // multiple other children 
        Conatiner( // inner Container
            height: deviceHeight * 0.005,
            width: widgetWidth,
            child: LinearProgressIndicator(
                value: percentageOfMediaAlreadyDone,
                backgroundColor: Colors.transparent,
                valueColor: AlwaysStoppedAnimation<Color>(progressColor),
                ),
            )
        )
    ])

The problem is, that the inner Container & LinearProgressIndicator leave the BorderRadius of the outer Container (as seen in this image). Problem The progressBar should be as width as the outer Container, but only be shown, where the outer Container is (so only on the blue Container, not on the white background).

Even if I add a BorderRadius.only to the inner Container, that does not fix the problem, since 1) its not high enough & 2) the LinearProgressIndicator disregards this borderRadius again (as seen in thi image). Failed try to fix

My current workaround is to reduce the width of the inner Container to not conflict with the BorderRadius of the outer Container, but I am not content with that version.

[√] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.19041.746], locale en-DE)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)

question from:https://stackoverflow.com/questions/66062808/widget-outside-of-parents-borderradius

Answer 1

You can try to wrap the outer Container with ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(10),
  child: Container(
   ...