Hi, I'm learning compose and was wondering if I can reuse a Modifier. I created a file 'Modifiers.kt' that contain modifiers I want to reuse, f.e.

val dialogModifier = Modifier
    .padding(10.dp)
    .background(MaterialTheme.colors.surface)
    .width(400.dp)

But then build is failing with: @Composable invocations can only happen from the context of a @Composable function . What am I doing wrong?

MaterialTheme.colors

can only be dereferenced inside a

@Composable

function.

Thank you for your help and explanation. I appreciate that! It's compiling when I refactor it as function as you proposed, but in this specific case padding gets just ignored, while background and width is applied correct.

The order of the modifiers matters

Like if you put .border(Color.Red).border(Color.Blue) you will have a blue border inside a red border.

Ah, that makes sense and is actually a nice behavior! 👌 Thanks again guys! 😀

FYI: Your other option for using composable content to build modifiers is the

composed

function. There's subtle differences in using this as opposed to just marking a function with @Composable. If you mark your function with @Composable as @Alexander Maryanovsky suggested, any composable references will be evaluated at the time of the function invocation. If you use the

composed

function, it happens a bit later in the recomposition. The official description:

Declare a just-in-time composition of a Modifier that will be composed for each element it modifies. composed may be used to implement stateful modifiers that have instance-specific state for each modified element, allowing the same Modifier instance to be safely reused for multiple elements while maintaining element-specific state.

https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).com[…](kotlin.Function1,kotlin.Function1)

Yes, Modifiers are designed to be reusable.

Modifier.composed

is the way to create a modifier factory that will be invoked at each usage site to preserve this reusability by giving you a place to create and

remember

point of use instance-specific information.

Can you guys elaborate on that? I'm not sure I understand what it does.

right. In essence every

@Composable

function (including lambdas) is a factory for instances of that content in a composition. They can be reused in multiple places and keep instance-specific state.

Modifier.composed {}

gives that same capability to modifiers and lets you assemble them into a chain with other modifiers like you would expect