Flat Checkbox

import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.border
import androidx.compose.foundation.style.rememberUpdatedStyleState
import androidx.compose.foundation.style.styleable
import androidx.compose.foundation.style.then
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.shadow.Shadow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp
import com.composeunstyled.CheckedIndicator
import com.composeunstyled.UnstyledCheckbox

private val FlatCheckboxBaseStyle = Style {
    shape(RoundedCornerShape(5.dp))
    background(Color(0xFFCCCCCC))
    border(2.dp, SolidColor(Color(0xFF323232)))
    dropShadow(
        Shadow(
            radius = 0.dp,
            color = Color(0xFF323232),
            offset = DpOffset(4.dp, 4.dp),
        ),
    )
}
private val FlatCheckboxCheckedStyle = Style {
    animate(tween(durationMillis = 300), tween(durationMillis = 300)) {
        background(Color(0xFF2D8CF0))
    }
}

@Composable
fun FlatCheckbox(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    accessibilityLabel: String? = null,
) {
    val interactionSource = remember { MutableInteractionSource() }
    val styleState = rememberUpdatedStyleState(interactionSource)

    UnstyledCheckbox(
        checked = checked,
        onCheckedChange = onCheckedChange,
        modifier = modifier,
        enabled = enabled,
        interactionSource = interactionSource,
        indication = null,
        accessibilityLabel = accessibilityLabel,
    ) {
        CheckedIndicator(
            modifier = Modifier
                .size(30.dp)
                .styleable(
                    styleState,
                    FlatCheckboxBaseStyle.then(if (checked) FlatCheckboxCheckedStyle else Style),
                ),
        ) {
            Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Canvas(Modifier.size(30.dp)) {
                    val strokeWidth = 2.5.dp.toPx()
                    drawLine(
                        color = Color.White,
                        start = Offset(5.5.dp.toPx(), 13.dp.toPx()),
                        end = Offset(10.5.dp.toPx(), 18.dp.toPx()),
                        strokeWidth = strokeWidth,
                        cap = StrokeCap.Square,
                    )
                    drawLine(
                        color = Color.White,
                        start = Offset(10.5.dp.toPx(), 18.dp.toPx()),
                        end = Offset(20.5.dp.toPx(), 8.dp.toPx()),
                        strokeWidth = strokeWidth,
                        cap = StrokeCap.Square,
                    )
                }
            }
        }
    }
}

@Preview
@Composable
fun FlatCheckbox() {
    var checked by remember { mutableStateOf(true) }

    FlatCheckbox(
        checked = checked,
        onCheckedChange = { checked = it },
        accessibilityLabel = "Flat checkbox",
    )
}