Function

curvedText

CurvedText is a component allowing developers to easily write curved text following the curvature a circle (usually at the edge of a circular screen).

CurvedTextDemo

@Composable
fun CurvedTextDemo() {
    CurvedLayout() {
        curvedColumn(angularAlignment = CurvedAlignment.Angular.Center) {
            curvedRow {
                curvedText("Red", color = Color.Red)
                curvedText(
                    "White On Green",
                    color = Color.White,
                    background = Color.Green,
                    modifier = CurvedModifier.padding(angular = 5.dp),
                )
                curvedText("Big", fontSize = 24.sp)
                curvedText(
                    "Extra Bold",
                    fontWeight = FontWeight.ExtraBold,
                    modifier = CurvedModifier.padding(angular = 5.dp),
                )
            }
            curvedRow {
                curvedText("Default")
                curvedText(
                    "Italic",
                    fontStyle = FontStyle.Italic,
                    modifier = CurvedModifier.padding(angular = 5.dp),
                )
                curvedText("Monospaced", fontFamily = FontFamily.Monospace)
            }
        }
    }
}

CurvedTextProviderDemo

@Composable
fun CurvedTextProviderDemo() {
    CompositionLocalProvider(
        LocalContentColor provides Color.Cyan,
        LocalContentAlpha provides 0.5f,
        LocalTextStyle provides TextStyle(fontFamily = FontFamily.Serif),
    ) {
        val greenStyle = LocalTextStyle.current.copy(color = Color.Green)
        CurvedLayout {
            curvedText("Serif Cyan 50%")
            curvedText("Green", style = CurvedTextStyle(greenStyle))
        }
    }
    ProvideTextStyle(
        value =
            TextStyle(color = Color.Green, background = Color.White, fontWeight = FontWeight.Bold)
    ) {
        CurvedLayout(anchor = 90f) { curvedText("Green On White") }
    }
}