SaveableStateHolder

interface SaveableStateHolder

Allows to save the state defined with rememberSaveable for the subtree before disposing it to make it possible to compose it back next time with the restored state. It allows different navigation patterns to keep the ui state like scroll position for the currently not composed screens from the backstack.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.saveable.rememberSaveableStateHolder

@Composable
fun <T : Any> Navigation(
    currentScreen: T,
    modifier: Modifier = Modifier,
    content: @Composable (T) -> Unit
) {
    // create SaveableStateHolder.
    val saveableStateHolder = rememberSaveableStateHolder()
    Box(modifier) {
        // Wrap the content representing the `currentScreen` inside `SaveableStateProvider`.
        // Here you can also add a screen switch animation like Crossfade where during the
        // animation multiple screens will be displayed at the same time.
        saveableStateHolder.SaveableStateProvider(currentScreen) {
            content(currentScreen)
        }
    }
}

Column {
    var screen by rememberSaveable { mutableStateOf("screen1") }
    Row(horizontalArrangement = Arrangement.SpaceEvenly) {
        Button(onClick = { screen = "screen1" }) {
            Text("Go to screen1")
        }
        Button(onClick = { screen = "screen2" }) {
            Text("Go to screen2")
        }
    }
    Navigation(screen, Modifier.fillMaxSize()) { currentScreen ->
        if (currentScreen == "screen1") {
            Screen1()
        } else {
            Screen2()
        }
    }
}

The content should be composed using SaveableStateProvider while providing a key representing this content. Next time SaveableStateProvider will be used with the same key its state will be restored.

Summary

Public functions

@Composable
fun SaveableStateProvider(key: Any, content: @Composable () -> Unit): Unit

fun removeState(key: Any): Unit