How can I make the child composable functions be in the parent composable function that has fixed size in jetpack compose?

Question

I'd like to create a custom composable function that has fixed size and its child must be inside the area.

Here's my code.

@Composable
fun ImageTextField(
    initialValue: String = "",
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    var value by remember { mutableStateOf(initialValue) }

    BoxWithConstraints(
        modifier = modifier
    ) {
        Image(
            painter = painterResource(id = R.drawable.bg_default),
            contentDescription = null,
            modifier = Modifier.matchParentSize()
        )
        Row(
            verticalAlignment = Alignment.Bottom,
            modifier = Modifier
                .padding(
                    start = 16.dp,
                    bottom = 25.dp
                )
                .align(Alignment.BottomStart)
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_heart),
                contentDescription = null,
                modifier = Modifier
                    .padding(bottom = 3.dp)
                    .height(14.dp)
                    .width(27.dp)
            )
            PlainTextField(
                value = value,
                textStyle = TextStyle(
                    fontSize = 24.sp,
                    color = Gray01,
                    textAlign = TextAlign.Center
                ),
                onValueChange = {
                    value = it
                    onValueChange.invoke(value)
                },
                modifier = Modifier
                    .padding(start = 1.dp)
                    .width(85.dp)
                    .background(White)
                    .drawBehind {
                        val y = size.height - 3.dp.toPx()
                        drawLine(
                            Color.Black,
                            Offset(0f, y),
                            Offset(size.width, y),
                            strokeWidth = 3.dp.toPx()
                        )
                    }
            )
        }
    }
}

And I am using like this:

ImageTextField(
    initialNickname = "",
    onValueChange = {},
    modifier = Modifier
                .height(125.dp)
                .width(196.dp)
)

But in my case, even though the parent function(BoxWithConstraints)'s size is fixed, the child functions just ignores its parent. I guess this is because compose checks child size first. So, I found matchParentSize(). But this also acts like fillMaxSize(). If I fix Image's size, then, the Row doesn't align it's parent but it goes to the screen's BottomStart. How can I fix this problem?

But the result is this.

Answer 1

If you're using BoxWithConstraints you have access to the boxes max width and height.. you can use the internal child composables to use the height and width as a percentage of the parent Box .

For eg:

BoxWithConstraints(modifier) {

val boxWidth = maxWidth
val boxHeight = maxHeight

PlainTextField(
.
.
modifier = MOdifier.width(boxWidth/2)
.
.
)



}