A modern programming language that makes developers happier.

kotlinlang

When using a `Box` that renders an arc with `Canvas` and a centered `Text`; why is the `Box` sizing wrong if contentAlignment is set to center? :thread:

Without contentAlignment=Center, the text is obviously laid out at the top left, but sizing of the box is correct. Ill leave my code below!

```  Box(
        modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(1f),
        contentAlignment = Center,
        content = {
            Canvas(
                modifier = Modifier.matchParentSize(),
                onDraw = {
                    val progressCircleWidth = ProgressCircleWidth.toPx()
                    val backgroundCircleWidth = TrackCircleWidth.toPx()

                    val radius = size.width / 2

                    drawCircularIndicator(
                        startAngle = StartAngle,
                        sweep = 360f,
                        color = trackCircleColor,
                        strokeWidth = backgroundCircleWidth,
                        radius = radius
                    )

                    drawCircularIndicator(
                        startAngle = StartAngle,
                        sweep = animatedProgress * EndAngle,
                        color = progressCircleColor,
                        strokeWidth = progressCircleWidth,
                        radius = radius
                    )
                }
            )

            center() //Text
        }
    )```
```private fun DrawScope.drawCircularIndicator(
    startAngle: Float,
    sweep: Float,
    color: Color,
    strokeWidth: Float,
    radius: Float
) {
    drawArc(
        color = color,
        startAngle = startAngle,
        sweepAngle = sweep,
        useCenter = false,
        topLeft = size.center - Offset(
            x = radius,
            y = radius
        ),
        size = Size(
            size.width,
            size.height,
        ),
        style = Stroke(
            width = strokeWidth,
            cap = Round
        )
    )
}```


Also, I realize that I can render text directly on the canvas and probably have it centered that way easily. Id like to know why this isnt working though, and my use case requires a pretty complex center-content that goes beyond just text.

Simply removing the center composable from the box makes it size correctly. In this example Im just using a Text from the material library as the center content.

It seems to work with other composables, text being the exception :thinking_face:

Im rendering all of this inside an AlertDialog. Not sure if that makes any difference.

Can’t help much, but the fact that you’re having iusses when it’s in AlertDialog, makes me think of this: <https://kotlinlang.slack.com/archives/CJLTWPH7S/p1630863255280400?thread_ts=1630854269.278500&amp;channel=CJLTWPH7S&amp;message_ts=1630863255.280400|https://kotlinlang.slack.com/archives/CJLTWPH7S/p1630863255280400?thread_ts=1630854269.278500&amp;channel=CJLTWPH7S&amp;message_ts=1630863255.280400>

<@U0KMMQA20> a simple text from the material design library

I’m not sure then, but that alert dialog thing seems worth checking out. 

Yup, the AlertDialog baseline was it. Stripped it out until its officially fixed and everything works!