---
title: "curvedRow"
description: "A layout composable that places its children in an arc, rotating them as needed. This is similar
to a [Row] layout, but curved into a segment of an annulus.

The thickness of the layout (the difference between the outer and inner radius) will be the same
as the thickest child, and the total angle taken is the sum of the children's angles."
type: "function"
---

<div class='type'>Function</div>


<a id='references'></a>
<div class='sourceset sourceset-android'>Android</div>


```kotlin
public fun CurvedScope.curvedRow(
    modifier: CurvedModifier = CurvedModifier,
    radialAlignment: CurvedAlignment.Radial? = null,
    angularDirection: CurvedDirection.Angular? = null,
    contentBuilder: CurvedScope.() -> Unit,
): Unit
```


A layout composable that places its children in an arc, rotating them as needed. This is similar
to a `Row` layout, but curved into a segment of an annulus.

The thickness of the layout (the difference between the outer and inner radius) will be the same
as the thickest child, and the total angle taken is the sum of the children's angles.

#### Parameters

| | |
| --- | --- |
| modifier | The `CurvedModifier` to apply to this curved row. |
| radialAlignment | Radial alignment specifies where to lay down children that are thinner than the CurvedRow, either closer to the center `CurvedAlignment.Radial.Inner`, apart from the center `CurvedAlignment.Radial.Outer` or in the middle point `CurvedAlignment.Radial.Center`. If unspecified, they can choose for themselves. |
| angularDirection | Specify if the children are laid out clockwise or anti-clockwise, and if those needs to be reversed in a Rtl layout. If not specified, it will be inherited from the enclosing `curvedRow` or `CurvedLayout` See `CurvedDirection.Angular`. |
| contentBuilder | Scope used to provide the content for this row. |




## Code Examples
### CurvedRowAndColumn
```kotlin
@Composable
fun CurvedRowAndColumn() {
    CurvedLayout(modifier = Modifier.fillMaxSize()) {
        curvedComposable { Box(modifier = Modifier.size(20.dp).background(Color.Red)) }
        curvedColumn(angularAlignment = CurvedAlignment.Angular.End) {
            repeat(3) {
                curvedRow {
                    curvedComposable {
                        BasicText(
                            "Row #$it",
                            Modifier.background(Color.White).padding(2.dp),
                            TextStyle(color = Color.Black, fontSize = 14.sp),
                        )
                    }
                    curvedComposable {
                        Box(modifier = Modifier.size(10.dp).background(Color.Green))
                    }
                    curvedComposable {
                        BasicText(
                            "More",
                            Modifier.background(Color.Yellow).padding(2.dp),
                            TextStyle(color = Color.Black, fontSize = 14.sp),
                        )
                    }
                }
            }
        }
        curvedComposable { Box(modifier = Modifier.size(20.dp).background(Color.Red)) }
    }
}
```