How to achieve a custom snackbar in compose using material 3? I want to change the alignment of the snackbar. Also I want dynamic icon on the snackbar either on left or right side.

CodePudding user response：

You can customize your snackbar using SnackBar composable and can change alignment using SnackbarHost alignment inside a Box if that's what you mean.

val snackState = remember { SnackbarHostState() }
val coroutineScope = rememberCoroutineScope()

Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(20.dp)
) {

    Column(modifier = Modifier.fillMaxSize()) {
        Button(
            modifier = Modifier.fillMaxWidth(),
            onClick = {
                coroutineScope.launch {
                    snackState.showSnackbar("Custom Snackbar")
                }
            }) {
            Text("Show Snackbar")
        }
    }
    SnackbarHost(
        modifier=Modifier.align(Alignment.BottomStart),
        hostState = snackState
    ) { snackbarData: SnackbarData ->
        CustomSnackBar(
            R.drawable.baseline_swap_horiz_24,
            snackbarData.visuals.message,
            isRtl = true,
            containerColor = Color.Gray
        )
    }
}

@Composable
fun CustomSnackBar(
    @DrawableRes drawableRes: Int,
    message: String,
    isRtl: Boolean = true,
    containerColor: Color = Color.Black
) {
    Snackbar(containerColor = containerColor) {
        CompositionLocalProvider(
            LocalLayoutDirection provides
                    if (isRtl) LayoutDirection.Rtl else LayoutDirection.Ltr
        ) {
            Row {

                Icon(
                    painterResource(id = drawableRes),
                    contentDescription = null
                )
                Text(message)
            }
        }
    }
}