How to fillMaxSize() the Box() inside row

I want to align the button in the BottomEnd of the Box in Row (In the BottonEnd of the bellow Card). I have Card with Row who is devided in two parts - Card and Box, and I want the Box to fill max of the rest of the row. I cannot implement it how I would wanted. Bellow I attached the visualization of the current code.

@Composable
fun ProductItem(product: ProductModel, onItemClick: () -> Unit, onAddToCardButton: () -> Unit) {
    Card(
        modifier = Modifier
            .fillMaxSize()
            .padding(7.dp)
            .clickable { onItemClick() },
        shape = MaterialTheme.shapes.large,
        elevation = 4.dp
    ) {
        Row(
            modifier = Modifier.fillMaxSize()
        ) {
            Card(
                modifier = Modifier
                    .weight(1f),
                shape = MaterialTheme.shapes.small,
                elevation = 2.dp
            ) {
                Image(
                    painter = painterResource(id = R.drawable.ic_splash_screen),
                    contentDescription = "Image of ${product.name}",
                )
            }
            Box(
                modifier = Modifier
                    .weight(2f)
                    .fillMaxHeight()
                    .padding(6.dp)
                    .background(Color.Green)
            ) {
                Column(modifier = Modifier.align(Alignment.TopStart)) {
                    Text(
                        text = "${product.number}. ${product.name}",
                        fontWeight = FontWeight.Bold,
                        style = MaterialTheme.typography.h4,
                    )
                    Text(
                        text = product.ingredients, fontStyle = FontStyle.Italic
                    )
                }

                Button(
                    modifier = Modifier.align(Alignment.BottomEnd),
                    onClick = {
                        onAddToCardButton()
                    },
                    shape = RoundedCornerShape(8.dp),
                ) {
                    if (product.type == "pizza") {
                        Text(text = "od ${String.format("%.2f", product.price[0])} zł")
                    } else {
                        Text(text = "${String.format("%.2f", product.price[0])} zł")

                    }
                }
            }
        }
    }
}

CodePudding user response：

The code looks good to me at first sight, even tried it and the button is on the bottom right corner. Where do you define the height of your ProductItem card?

Maybe you can try to define it in the code you provided by changing the

.fillMaxSize()

modifier to

.fillMaxWidth()
.requiredHeight(**.dp)

at your first Card composable.

So it would look something like this:

@Composable
fun ProductItem(product: ProductModel, onItemClick: () -> Unit, onAddToCardButton: () -> Unit) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .requiredHeight(**.dp)
            .padding(7.dp)
            .clickable { onItemClick() },
        shape = MaterialTheme.shapes.large,
        elevation = 4.dp
    ) {
 ...
}

CodePudding user response：

I expect you display this item in LazyColumn or inside a vertical scrollable.

Modifier.fillMaxHeight doesn't work in this case, because parent height constraint is equal to infinity.

To solve this you ofc can use a static value, but in this case intrinsic measurements can be used to wrap content size.

Add Modifier.height(IntrinsicSize.Max) to your Row.