Jetpack Compose：Snackbarの色を指定する

課題

Jetpack ComposeでSnackbarを表示しようとしたら想定とは違った色で表示された。色を指定するにはどうすればよいか。

対応

SnackbarではColorsで指定した色がデフォルトで使われるのでそれを変更する手もあるのだが、ちょっと加工して使われるので、ここでは直接指定でした場合の話をする。

SnackbarはScaffold内でSnackbarHostを経由して設定されている。

// ScaffoldのsnackbarHost部分抜き出し
@Composable
fun Scaffold(
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },

// SnackbarHostのsnackbar部分抜き出し
@Composable
fun SnackbarHost(
    snackbar: @Composable (SnackbarData) -> Unit = { Snackbar(it) }

Snackbarのパラメータおよびデフォルト値は以下のようになっている。

@Composable
fun Snackbar(
    snackbarData: SnackbarData,
    modifier: Modifier = Modifier,
    actionOnNewLine: Boolean = false,
    shape: Shape = MaterialTheme.shapes.small,
    backgroundColor: Color = SnackbarDefaults.backgroundColor,
    contentColor: Color = MaterialTheme.colors.surface,
    actionColor: Color = SnackbarDefaults.primaryActionColor,
    elevation: Dp = 6.dp
) {

今回は backgroundColor, contentColor, actionColorを変更したい。
ということでカスタマイズしたSnackbarを作る。（色は適当）

@Composable
fun CustomSnackbar(snackbarData: SnackbarData) {
    Snackbar(
        snackbarData = snackbarData,
        backgroundColor = Color.Green,
        contentColor = Color.White,
        actionColor = Color.Red
    )
}

あとは作成したCustomSnackbarをScaffoldのパラメータとして渡してあげればよい。

 val scaffoldState: ScaffoldState = rememberScaffoldState()
 Scaffold(
      snackbarHost = { hostState ->
                     SnackbarHost(
                          hostState = hostState,
                         snackbar = { snackbarData -> 
                                CustomSnackbar(snackbarData = snackbarData) }
                     )},
     scaffoldState = scaffoldState) {