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") }

[Alox1d]

For anyone implementing this with Balloon 2.x, the API now lets the parent own both states directly, so you do not need to capture BalloonWindow references from sibling content lambdas:

@Composable
fun TwoTips() {
    val style = rememberBalloonBuilder {
        setPadding(12.dp)
        setBackgroundColor(Color(0xFF785EF0))
    }
    val first = rememberBalloonState(style)
    val second = rememberBalloonState(style)

    Column {
        Balloon(
            state = first,
            balloonContent = { Text("Edit your profile", color = Color.White) },
        ) {
            Button(onClick = {
                second.dismiss()
                first.showAlignTop()
            }) { Text("First") }
        }

        Balloon(
            state = second,
            balloonContent = { Text("Another tip", color = Color.White) },
        ) {
            Button(onClick = {
                first.dismiss()
                second.showAlignTop()
            }) { Text("Second") }
        }
    }
}

The Balloon imports in 2.x are from com.skydoves.balloon; the style uses Compose Dp and Color. These are two separate state instances even though they share one style.

For an automatic sequence, the documented suspending calls wait for dismissal before continuing:

LaunchedEffect(Unit) {
    first.awaitAlignTop()
    second.awaitAlignBottom()
}

Place that effect at the parent level while both anchors are composed. Use a separate “tour started” key if the sequence should start from a user action. As with any LaunchedEffect(Unit), it can start again if the entire parent leaves and later re-enters composition, so persist completion separately if this is a once-only onboarding tour.

Your original snippet uses the 1.x callback API; the example above requires migrating rather than mixing the two APIs. The migration guide and current README document the parent-owned state and await methods.