Rows not getting full width inside Column in Compose

Issue

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.

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

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),
        ) {

        }
    }
}

Answered By - Chirag Thummar