Does compose currently provide something like a Au...

# compose

[Landerl Young]

Does compose currently provide something like a AutoResizeText? If not how do implement one following the best practice?

I currently came across same feature need, and what I did is like this:

var baseSize by remember { mutableStateOf(0f) }    
Column(
        modifier = modifier.onSizeChanged { (width, height) ->
            baseSize = min(width * 1.7f, height.toFloat())
        }
) {
        val firstLevelSize = baseSize * 5 / 10
        Text(
            fontSize = LocalDensity.current.run {
                firstLevelSize.toSp()
            },
           ...
        )
    }

Full code here: https://github.com/LanderlYoung/FlashAppSearch/blob/16a1fc9ac6c67e184f801e125f79ef[…]o/github/landerlyoung/flashappsearch/search/ui/piece/KeyIcon.kt

But this code has a issue: during the initial composition the fontSize is 0, so the Text is not shown. when onSizeChanged got called, baseSize would update, and causing a second pass re-composition, at that time the Text is actually shown.

Is there any better solutions?


BTW, there is a StackOverFlow thread // https://stackoverflow.com/questions/63971569/androidautosizetexttype-in-jetpack-compose

[Albert Chang]

You can use BoxWithConstraints to get the size during the measuring stage (which is before composition).

[Landerl Young]

Thanks, works like charm!

BoxWithConstraints(
    modifier = Modifier
        .fillMaxWidth()
        .weight(5f)
) {
    val size = min(maxWidth * 1.7f, maxHeight)
    val fontSize = size * 0.8f

    Text(
        text = first,
        color = color,
        fontSize = LocalDensity.current.run { fontSize.toSp() },
        modifier = Modifier.fillMaxSize(),
        textAlign = TextAlign.Center,
    )
}