curveToEdge

@RequiresApi(value = 33)
fun Modifier.curveToEdge(
    maxSweepAngle: Float = CurvedTextDefaults.ScrollableContentMaxSweepAngle,
    angularDirection: AngularDirection = AngularDirection.Clockwise,
    anchor: Float = 270.0f,
    anchorType: AngularAnchorType = AngularAnchorType.Center
): Modifier

A Modifier that curves a component to the border of the parent container around the center, always treating the container as a circle. Useful for circular screens. It draws outside the bounds of the container, then a shader is applied that calculates and draws the curved content.

If the container is a rectangle, it will be treated as a circle with radius of the height divided by 2.

Content towards the center of the container will be smaller due to the method of calculating the curve. This is most apparent in text that runs over one line.

There are currently some limitations: clickable components will have incorrect clickable bounds, and talkback doesn't highlight components correctly.

Simple example of applying Modifier.curvedToEdge to text:

import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.curveToEdge

Text("Curved Text", Modifier.curveToEdge())

Example of applying Modifier.curvedToEdge to a long piece of text, with overflow handling:

import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.wear.compose.material3.CurvedTextDefaults
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.curveToEdge

Text(
    "A really long piece of curved text",
    Modifier.curveToEdge(CurvedTextDefaults.StaticContentMaxSweepAngle),
    overflow = TextOverflow.Ellipsis,
    maxLines = 1,
)