Search code examples
kotlinandroid-jetpack-composekotlin-multiplatformandroid-jetpack-compose-ui

Compose Text is not showing as center inside the Box when outer parent is being used fixed size


Below is my Compose UI Code.

Card(Modifier.height(150.dp)
                    .weight(1.0F)) {
                Box (modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center){
                    Text(text = "A", fontSize = 130.sp)
                }

            }

Below is how UI look, Consider this code for the Compose Multiplaform not only to the android

enter image description here

We can see that the letter A is not centered inside the Card view.


Solution

  • Thanks to @Bylazy

    I change my code and it's working now.

    Card(Modifier.height(150.dp)
                        .weight(1.0F)) {
    
                    Box (modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center){
                        Text(text = "A", fontSize = 130.sp,style = TextStyle(
                            platformStyle = PlatformTextStyle(
                                includeFontPadding = false
                            )
                        ))
                    }
    
                }
    

    For Compose Multiplatform:-

    Text(
        "Your text here",
        modifier = Modifier
            .fillMaxSize()
            .wrapContentHeight(
                align = Alignment.CenterVertically, // aligns to the center vertically (default value)
                unbounded = true // Makes sense if the container size less than text's height
            ))
    

    Source:- Github Compose Multiplatform