Text not showing outside of Row scope in jetpack compose

Question

What's Happening?

So I have this column which has two mutable objects of type LocalTime. I am updated both in the TwoLineButton() method. Then I have this method ShowTimeRangeText() which displays a Text if both LocalTime objects are anything other than null. It's a simple condition.

Column() {
    val selectedTimeStart = remember { mutableStateOf<LocalTime?>(null) }
    val selectedTimeEnd = remember { mutableStateOf<LocalTime?>(null) }
    Row(modifier = Modifier.padding(start = 8.dp, end = 8.dp)) {
        TwoLineButton(txt1 = "Start Time", txt2 = "-- : --", selectedTimeStart)
        Spacer(modifier = Modifier.weight(0.05f))
        TwoLineButton(txt1 = "End Time", txt2 = "-- : --", selectedTimeEnd)
    }
    ShowTimeRangeText(selectedTimeStart,selectedTimeEnd)
}


@Composable
private fun ShowTimeRangeText(
    selectedTimeStart: MutableState<LocalTime?>,
    selectedTimeEnd: MutableState<LocalTime?>
) {
    if (selectedTimeStart.value != null && selectedTimeEnd.value != null){
        Timber.d("Text Can be shown")
        Text(text = "Some text")
    }
}

@Composable
fun TwoLineButton(
    txt1: String, txt2: String, selectedTime: MutableState<LocalTime?> = remember {
        mutableStateOf(null)
    }
) {
    val sheetState = rememberSheetState()
    val title = remember {
        mutableStateOf(txt1)
    }

    OpenClock(sheetState, title, selectedTime)

    Button(onClick = {
        sheetState.show()
    }) {
        Column {
            Text(
                text = txt1,
                textAlign = TextAlign.Center,
                modifier = Modifier.width(80.dp)
            )
            Text(
                text = if (selectedTime.value == null) txt2 else selectedTime.value.toString(),
                textAlign = TextAlign.Center,
                modifier = Modifier.width(80.dp)
            )
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun OpenClock(
    sheetState: com.maxkeppeker.sheets.core.models.base.SheetState,
    title: MutableState<String>,
    selectedTime: MutableState<LocalTime?>
) {
    ClockDialog(
        header = Header.Default(title.value),
        state = sheetState,
        selection = ClockSelection.HoursMinutes { hours, minutes ->
            Timber.d("Time Selected")
            selectedTime.value = LocalTime.of(hours, minutes)
        },
        config = ClockConfig(
            is24HourFormat = false,
        ),
    )
}

What's the issue?

If i put the method ShowTimeRangeText() inside my Row() the the text is being displayed according to the condition. But If I put the method outside of Row() then the text is not showing at all (even if the condition is true and the log is printing)

I've tried showing the text without the conditon. And it shows. Tried moving the row and the text outside the column but still nothing happend.

I was expecting to show the text within the condition.

What does it mean: *If I put the method outside of ShowTimeRangeText()* ? — Gabriele Mariotti, Feb 25 '23 at 08:38
selectedTimeStart and selectedTimeEnd both variable have null values .., can you tell me where are you updating the selectedTimeStart and selectedTimeEnd's value ? — Jayant Kumar, Feb 25 '23 at 12:33
Inside the `TwoLineButton()` method. Look I've passed those variables inside the `TwoLineButton()` method @JayantKumar — Sourav, Feb 25 '23 at 13:20
can you share this `TwoLineButton()` code . i want to see how are you updating the data. — Jayant Kumar, Feb 25 '23 at 13:29
@JayantKumar `TwoLineButton()` and `OpenClock()` method added in the post. I am update the LocalTime variable after picking a time from the `OpenClock()` dialog. For which I used this library https://github.com/maxkeppeler/sheets-compose-dialogs — Sourav, Feb 25 '23 at 14:08

score 0 · Answer 1 · answered Feb 25 '23 at 15:18

Please check the below code , this is how you can update the data

@Composable
fun TestExample() {

    Column() {
        var selectedTimeStart by remember { mutableStateOf<String?>(null) }
        var selectedTimeEnd by remember { mutableStateOf<String?>(null) }

        Row(
            modifier = Modifier
                .padding(start = 8.dp, end = 8.dp)
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(text = "one")
            TwoLineButton(
                onStartTimeUpdate = {
                    selectedTimeStart = it
                }
            ) {

                selectedTimeEnd = it
            }
            Text(text = "Two")

        }
        ShowTimeRangeText(selectedTimeStart, selectedTimeEnd)
    }

}

@Composable
fun TwoLineButton(
    onStartTimeUpdate: (String) -> Unit,
    onEndTimeUpdate: (String) -> Unit
) {

    Button(onClick = {
        onStartTimeUpdate("11:30:00")
        onEndTimeUpdate("02:30:09")
    }) {
        Text(text = "Update date")
    }

}


@Composable
private fun ShowTimeRangeText(
    selectedTimeStart: String?,
    selectedTimeEnd: String?
) {
    if (selectedTimeStart != null && selectedTimeEnd != null) {
        Text(text = "Start Time $selectedTimeStart      End Time $selectedTimeEnd")
    }

}

*Note : Always use state hoisting , never pass MutableState to child composable function , use higher order function to update data to parent function.

Text not showing outside of Row scope in jetpack compose

1 Answers1