---
title: "curvedColumn"
description: "A curved layout composable that places its children stacked as part of an arc (the first child
will be the outermost). This is similar to a [Column] 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 sum
of the thickness of its children, and the angle taken will be the biggest angle of the children."
type: "function"
---

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


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


```kotlin
public fun CurvedScope.curvedColumn(
    modifier: CurvedModifier = CurvedModifier,
    radialDirection: CurvedDirection.Radial? = null,
    angularAlignment: CurvedAlignment.Angular? = null,
    contentBuilder: CurvedScope.() -> Unit,
): Unit
```


A curved layout composable that places its children stacked as part of an arc (the first child
will be the outermost). This is similar to a `Column` 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 sum
of the thickness of its children, and the angle taken will be the biggest angle of the children.

#### Parameters

| | |
| --- | --- |
| modifier | The `CurvedModifier` to apply to this curved column. |
| radialDirection | Order to lay out components, outside in or inside out. The default is to inherit from the containing `curvedColumn` or `CurvedLayout` |
| angularAlignment | Angular alignment specifies where to lay down children that are thinner than the curved column, either at the `CurvedAlignment.Angular.Start` of the layout, at the `CurvedAlignment.Angular.End`, or `CurvedAlignment.Angular.Center`. If unspecified or null, they can choose for themselves. |
| contentBuilder | Scope used to provide the content for this column. |




## 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)) }
    }
}
```