Jetpack Compose Show Snackbar

November 2, 2021

Assuming I try to load data from firestore, and I would show error via snackbar.

@Composable
fun JourneyApp(viewModel: MainViewModel = viewModel()) {
    // snackbar setup
    // allow sequential snackbar message without overwriting each other
    val snackbarChannel = remember { Channel<String>(Channel.BUFFERED) } 
    val scaffoldState = rememberScaffoldState()

    snackbarChannel.trySend("Loading Data ....")

    val postsResource by viewModel.fetchPosts().collectAsState(initial = Resource.loading(null))
    val posts = postsResource.data ?: emptyList()


    if (postsResource.status == Status.ERROR) {
        snackbarChannel.trySend(postsResource.message ?: "Error")
    }

    LaunchedEffect(snackbarChannel) {
        snackbarChannel.receiveAsFlow().collect { message ->
            scaffoldState.snackbarHostState.showSnackbar(
                message = message
            )
            /*
            when (result) {
                SnackbarResult.ActionPerformed -> {
                    /* action has been performed */
                }
                SnackbarResult.Dismissed -> {
                    /* dismissed, no action needed */
                }
            }
             */
        }
    }


    Scaffold(
        scaffoldState = scaffoldState,
    ) { innerPadding ->

        LazyColumn(modifier = Modifier.padding(innerPadding)) {
            items(posts) { post ->
                Text(post.title)
            }
        }
    }
}

❤️ Is this article helpful?

Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now

By Desmond Lua

A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.

Tags:

Related entries:

Jetpack Compose Paging Sample

Jetpack Compose Check Permission (Accompanist)

Jetpack Compose Navigation

Jetpack Compose load Firestore Data with Flow

Jetpack Compose Load Image With Coil

Android Jetpack Compose BottomNavigationBar With Compose Navigation

Android Jetpack Compose BottomNavigationBar

Guide to Start Learning Jetpack Compose