Button is not showing jetpack compose android

Question

I have a composable in which I have a TextField and a button below it. The TextField is showing and working as expected but the button, which is below that TextField, is not showing at all. This is the code

@Composable
fun UpperPanel() {
    val keyboardController = LocalSoftwareKeyboardController.current

    var menuItems = DatabaseStorage.databaseInstance?.menuItemDao()?.getAll()?.observeAsState(
        emptyList()
    )?.value

    var orderItems by remember {
        mutableStateOf(false)
    }

    Column(
        modifier = Modifier
            .padding(start = 12.dp, end = 12.dp, top = 5.dp, bottom = 15.dp)
            .fillMaxWidth(),
    ) {
        
        Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            modifier = Modifier
                .padding(top = 7.dp, bottom = 10.dp)
                .fillMaxWidth()
        ) {
            Column {
                

            Image(
                painter = painterResource(id = R.drawable.hero_image),
                contentDescription = "Upper Panel Image",
                modifier = Modifier
                    .size(130.dp, 130.dp)
                    .clip(RoundedCornerShape(15.dp))
            )
        }

        var searchPhrase by remember {
            mutableStateOf("")
        }

        Column {
            TextField(
                value = searchPhrase,
                placeholder = { Text(text = "Enter Search Phrase") },
                leadingIcon = { Icon(imageVector = Icons.Default.Search, contentDescription = "") },
                keyboardOptions = KeyboardOptions.Default.copy(
                    imeAction = ImeAction.Done
                ),
                keyboardActions = KeyboardActions(
                    onDone = {
                        keyboardController?.hide()
                    }
                ),
                onValueChange = { newValue ->
                    searchPhrase = newValue
                },
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentSize(align = Alignment.Center)
                    .background(Color.White),
                singleLine = true,
            )
            // Display filtered menu items
            if (searchPhrase.isNotEmpty()) {
                menuItems = menuItems?.filter { it.title.contains(searchPhrase, ignoreCase = true) }
            }

            menuItems?.let { LowerPanel(it) }

            Button( onClick = { orderItems = true }){
                Text(text = "Show")
            }
        }

    }

Here is the other composable

@Composable
private fun LowerPanel(items: List<MenuItemRoom>) {

    LazyColumn(
        modifier = Modifier
            .fillMaxHeight()
            .padding(top = 5.dp)
    ) {
        items(
            items = items,
            itemContent = { item ->

                Card(
                    onClick = {
                    }, modifier = Modifier
                        .fillMaxWidth()
                        .padding(5.dp),
                    colors = CardDefaults.cardColors(Color.Transparent)
                ) {
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(5.dp)
                    ) {
                        Column {
                            Text(
                                text = item.title,
                                style = MaterialTheme.typography.titleMedium
                            )
                            Text(
                                text = item.description,
                                style = MaterialTheme.typography.bodySmall,
                                modifier = Modifier
                                    .padding(top = 5.dp, bottom = 5.dp)
                                    .fillMaxWidth(.70f)
                            )
                            Text(
                                text = "$${item.price}",
                                style = MaterialTheme.typography.bodyMedium,
                            )
            }
        )
    }

}

In the UpperPanel(), the button with the text "Show" is not appearing. I have tried to put them in separate columns but it is still the same. How the code be changed to show the button below the textfield?

Answer 1

If you look at the modifier of LazyColumn, you used .fillMaxHeight(). This causes it to overlap the bottom button. If you use .height(100.dp) instead of fillMaxHeight() (you can adjust the 100 dp as needed), the button will become visible.