JetpackComposeでCheckboxの色を変更する方法

JetpackComposeでCheckboxの色を変更する方法です。

Checkboxを使用する機会があったので、共有しようと思います。

サンプルコードはこちら

CheckboxSample.kt

@Composable
fun CheckboxSample() {
    val checked = remember { mutableStateOf(true) }
    Checkbox(
        modifier = Modifier
            .size(24.dp),
        checked = checked.value,
        onCheckedChange = { checked.value = it },
        colors = getCheckboxColors()
    )
}

/**
 *　チェックボックスの色指定
 */
@Composable
private fun getCheckboxColors(): CheckboxColors {
    return object: CheckboxColors {
        @SuppressLint("UnrememberedMutableState")
        @Composable
        override fun borderColor(enabled: Boolean, state: ToggleableState): State<Color> {
            return mutableStateOf(colorResource(id = R.color.black))
        }

        @SuppressLint("UnrememberedMutableState")
        @Composable
        override fun boxColor(enabled: Boolean, state: ToggleableState): State<Color> {
            return mutableStateOf(colorResource(id = R.color.white))
        }

        @SuppressLint("UnrememberedMutableState")
        @Composable
        override fun checkmarkColor(state: ToggleableState): State<Color> {
            return mutableStateOf(colorResource(id = R.color.black))
        }
    }
}

CheckboxColorsというのがあるので、こちらを設定していきます。
こちらで設定できるのは枠の色、チェックの色、枠の中の色です。
ONの状態とOFFの状態で色を変更したい場合はToggleableStateでON状態かOFF状態か判定できます。
今回はシンプルな白と黒のみで作成しました。
お好みで色を変えてみてください。