Recommended Compose way to have multiple Balloons

[EternalMelody]

Hello Balloon community!

Loving this library so far, that said I have a question. What would be the recommended idiomatic Compose way to have multiple Balloons?

For example I can capture balloonWindow to a variable like this with lateinit var bw:

        lateinit var bw:BalloonWindow;
        Column {
            Balloon(
                builder = builder,
                balloonContent = {
                    Text(
                        text = "Now you can edit your profile!"
                    )
                }
            ) { balloonWindow ->
                bw = balloonWindow // Capture balloonWindow here
                Button(
                    onClick = {
                        balloonWindow.showAlignTop()
                    }
                ) {
                    Text(text = "showAlignTop")
                }
            }

            Balloon(
                builder = builder,
                balloonContent = {
                    Text(
                        text = "Hello"
                    )
                }
            ) { balloonWindow ->
                Button(
                    onClick = {
                        balloonWindow.showAlignTop()
                    }
                ) {
                    Text(text = "showAlignTop")
                    LaunchedEffect(key1 = Unit) {
                        bw.showAlignTop() // Use captured balloon window here
                    }
                }
            }
        }

But I'm not sure if this is recommended. Would appreciate opinions on this :)

[faraz152]

The idiomatic Compose approach is to avoid lateinit var entirely — it is not recomposition-safe and can hold a stale reference if the composable restarts.

Instead, hoist the BalloonWindow references into remembered state at the nearest common parent scope:

@Composable
fun MultipleBalloonScreen() {
    // Hold references at parent scope so siblings can coordinate
    var firstWindow by remember { mutableStateOf<BalloonWindow?>(null) }
    var secondWindow by remember { mutableStateOf<BalloonWindow?>(null) }

    val builder1 = rememberBalloonBuilder {
        setWidth(BalloonSizeSpec.WRAP)
        setHeight(BalloonSizeSpec.WRAP)
        // ... config for balloon 1
    }
    val builder2 = rememberBalloonBuilder {
        setWidth(BalloonSizeSpec.WRAP)
        setHeight(BalloonSizeSpec.WRAP)
        // ... config for balloon 2
    }

    Column {
        Balloon(
            builder = builder1,
            balloonContent = { Text("Edit your profile!") }
        ) { bw ->
            // Capture window on first composition
            LaunchedEffect(bw) { firstWindow = bw }

            Button(onClick = {
                secondWindow?.dismiss() // Dismiss sibling before showing
                bw.showAlignTop()
            }) {
                Text("Show Balloon 1")
            }
        }

        Balloon(
            builder = builder2,
            balloonContent = { Text("Hello!") }
        ) { bw ->
            LaunchedEffect(bw) { secondWindow = bw }

            Button(onClick = {
                firstWindow?.dismiss()
                bw.showAlignTop()
            }) {
                Text("Show Balloon 2")
            }
        }
    }
}

Why LaunchedEffect(bw) instead of direct assignment in the lambda?
The content lambda in Balloon { bw -> ... } is called during composition. Assigning to a MutableState during composition causes a IllegalStateException. LaunchedEffect defers the assignment to after composition completes safely.

For a walkthrough / onboarding sequence where balloons fire one-after-another, store the windows in a List and track an index:

val windows = remember { mutableStateListOf<BalloonWindow?>(null, null, null) }
var step by remember { mutableIntStateOf(0) }

// Show the next balloon
Button(onClick = {
    windows.getOrNull(step - 1)?.dismiss()
    windows.getOrNull(step)?.showAlignTop()
    step++
}) { Text("Next") }