Skip to content
Gestures & Scroll

Pull to Refresh

Pull down to trigger a refresh with PullToRefreshBox

PullToRefreshBox shows a refresh indicator when the content is pulled past the threshold. Drive it with an isRefreshing flag that you flip off when the work completes.

Pull to Refresh demos rendered in Compose Playground
Pixel-accurate preview · light theme

Examples

01

Pull to refresh

Pull down; the list reloads after a brief simulated fetch.

Kotlin
var isRefreshing by remember { mutableStateOf(false) }
var generation by remember { mutableIntStateOf(0) }
LaunchedEffect(isRefreshing) {
    if (isRefreshing) {
        delay(1200)
        generation++
        isRefreshing = false
    }
}
PullToRefreshBox(
    isRefreshing = isRefreshing,
    onRefresh = { isRefreshing = true }
) {
    Column(
        Modifier
            .fillMaxWidth()
            .height(200.dp)
            .verticalScroll(rememberScrollState())
    ) {
        repeat(6) { index ->
            Text("Item $generation.$index", Modifier.padding(12.dp))
        }
    }
}