androidkotlinandroid-jetpack-composeandroid-jetpack-compose-material3wordpress-jetpack

Rows not getting full width inside Column in Compose


I have column having size of 80dp and i set it to maxWidth and inside column i have two Rows i have equally divided both using weight(1f) but its not getting full width.

preview

Current Output

Column(
        modifier = modifier
            .fillMaxWidth()
            .size(80.dp)
            .background(Color.Transparent)
            .border(1.dp, colorGreyLight, shape = RoundedCornerShape(8.dp)),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Row(
            modifier = modifier
                .fillMaxWidth()
                .weight(1f)
                .background(colorPrimary),
            horizontalArrangement = Arrangement.SpaceAround,
            verticalAlignment = Alignment.CenterVertically
        ){

        }
        Row(
            modifier = modifier
                .fillMaxWidth()
                .weight(1f)
                .background(Color.Black),
            horizontalArrangement = Arrangement.SpaceAround,
            verticalAlignment = Alignment.CenterVertically
        ){

        }
}

Solution

  • Here is the code which work for me.

    Preview preview

    Code

    @Preview
    @Composable
    fun Stack022(modifier: Modifier = Modifier) {
        Column(
            modifier = modifier
                .fillMaxWidth()
                .height(80.dp)
                .clip(shape = RoundedCornerShape(8.dp))
                .border(2.dp, Color.Gray, shape = RoundedCornerShape(8.dp)),
        ) {
            Row(
                modifier = modifier
                    .fillMaxWidth()
                    .weight(1f)
                    .background(Color.Red),
            ) {
    
            }
            Row(
                modifier = modifier
                    .fillMaxWidth()
                    .weight(1f)
                    .background(Color.Black),
            ) {
    
            }
        }
    }