How to override SnackbarData in Jetpack Compose?

Question

I need a custom parameter in the snackbar, but showSnackbar only allows passing three parameters (message, actionLabel and duration). I need to pass an Enum to decide which status to show.

@Composable
fun BaseScreen(
    viewModel: BaseViewModel?,
    content: @Composable () -> Unit
) {
    val scaffoldState: ScaffoldState = rememberScaffoldState()
    val snackbarHostState = remember { SnackbarHostState() }
    val coroutineScope: CoroutineScope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = scaffoldState,
        snackbarHost = {
            SnackbarHost(
                hostState = snackbarHostState,
                snackbar = { snackbarData ->
                    CustomSnackbar(
                        message = snackbarData.message,
                        // I can't get custom parameter 
                        status = snackbarData.status
                    )
                }
            )
        },
    ) { innerPadding ->
        Column(modifier = Modifier.padding(innerPadding)) {
            viewModel?.showSnackbar = { message ->
                coroutineScope.launch {
                    snackbarHostState.showSnackbar(
                        message = message,
                        // I can't pass custom parameter
                        status = SnackbarStatusEnum.DANGER
                    )
                }
            }
            content()
        }
    }
}

CustomSnackbar has an Enum parameter (status), it is responsible for changing the snackbar backgroundColor and icon — Gustavo Faria, Nov 08 '22 at 18:55

score 0 · Answer 1 · answered Nov 09 '22 at 09:20

You can use something different.
Use a variable(state) to set the status and use a condition inside the Snackbar to change backgroundColor and actions.

Something like:

Scaffold(
    scaffoldState = scaffoldState,
    snackbarHost = {
        SnackbarHost(it) { data ->
            // custom snackbar with the custom colors
            Snackbar(
                backgroundColor = if (status) Color.Red else Color.Yellow,
                //contentColor = ...,
                snackbarData = data
            )
        }
    },
)

score 0 · Answer 2 · answered Apr 27 '23 at 06:15

You can used like this.

enum class SnackBarAction {
    GOTO_RIGHT,
    GOTO_LEFT,
}

SnackbarHost(
    hostState = snackbarHostState,
    snackbar = { data ->
    Snackbar(
        action = {
            /**
             * the trailing edge of the snackbar.
             * that accept the actionLabel from [data] from the call site and
             * act according to the FLAG.
             * @see [SnackBarAction] for more information.
             */
            data.actionLabel?.let { actionLabel ->
                when (actionLabel) {
                        // check whether the type of action to show from snackBar on ui.
                        SnackBarAction.GOTO_RIGHT.name -> {
                        // your code here when "GOTO_RIGHT"
                        }

                        SnackBarAction.GOTO_LEFT.name -> {
                        // your code here when "GOTO_LEFT"
                        }
                    }
                }
            }
        )
    },
)

// at the call side
val scope = rememberCoroutineScope()
val scaffoldState: ScaffoldState = rememberScaffoldState()

scope.launch {
        scaffoldState
            .snackbarHostState
            .showSnackbar(
                message = "your message",
                duration = SnackbarDuration.Short,
                actionLabel = SnackBarAction.GOTO_RIGHT.name
            )
    }
}

How to override SnackbarData in Jetpack Compose?

2 Answers2