Jetpack Compose function with lambda () -> Unit

Question

I'm trying to extract a method applied on a modifier into a Composable function

 TopAppBar(
            modifier = Modifier
                .align(Alignment.TopCenter)
                .height(56.dp)
                .background(
                    brush = Brush.verticalGradient(
                        colorGradient
                    )
                )

Specifically the Brush.verticalGradient() so that I can use the gradient Composable everywhere I need and just pass the list of colors to it.

I know that I need to use a lambda expression inside the Composable function but I'm not sure how to do it.

@Composable
private fun BottomBarGradient(
    content: @Composable () -> Unit) {
}

I'm pretty new in Compose. Can anyone point out a good tutorial/example for this?

You do not need any lambdas here, if you want to use same gradient in diferent composables, just decrare it as val myBrush = Brush.verticalGradient(listOf()) somewhere outside of composables and then use it anywhere. .background(brush = myBrush) — bylazy, Feb 01 '22 at 10:36
But what if I want to use it inside other compose activities, wouldn't it have made more sense to make is as a composable function? — Saul, Feb 01 '22 at 12:37

Sky · Accepted Answer · 2022-02-01T14:02:55.663

You are on the right way. But for you case, while working with TopAppBar/BottomAppBar, you need to apply RowScope (ex. content: @Composable RowScope.() -> Unit) for more information see function literal with receiver. I cannot tell were you can find specific information for you case but most can be found in android documentation or jetpack compose samples, for tutorial you can check google codelabs

Your custom composable should look like this:

val availableColors = listOf(
    Color.Black, Color.DarkGray,
    Color.Gray, Color.LightGray,
    Color.White, Color.Red,
    Color.Green, Color.Blue,
    Color.Yellow, Color.Cyan,
    Color.Magenta, Color.Transparent
)

@Composable
fun BottomBarVerticalGradient(
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit,
) {
    BottomAppBar(
        modifier = modifier.background(Brush.verticalGradient(colors = availableColors)),
        content = content,
        backgroundColor = Color.Transparent
    )
}

or more custom way:

@Composable
fun BottomBarVerticalGradient(
    colors: List<Color>,
    modifier: Modifier = Modifier,
    startY: Float = 0f,
    endY: Float = Float.POSITIVE_INFINITY,
    tileMode: TileMode = TileMode.Clamp,
    shape: Shape = RectangleShape,
    alpha: Float = 1.0f,
    content: @Composable RowScope.() -> Unit,
) {
    BottomAppBar(
        modifier = modifier.background(
            brush = Brush.verticalGradient(colors = colors, startY, endY, tileMode),
            shape = shape,
            alpha = alpha
        ),
        content = content,
        backgroundColor = Color.Transparent
    )
}

or this:

@Composable
fun BottomBarVerticalGradient(
    vararg colorStops: Pair<Float, Color>,
    modifier: Modifier = Modifier,
    startY: Float = 0f,
    endY: Float = Float.POSITIVE_INFINITY,
    tileMode: TileMode = TileMode.Clamp,
    shape: Shape = RectangleShape,
    alpha: Float = 1.0f,
    content: @Composable RowScope.() -> Unit,
) {
    BottomAppBar(
        modifier = modifier.background(
            brush = Brush.verticalGradient(colorStops = colorStops, startY, endY, tileMode),
            shape = shape,
            alpha = alpha
        ),
        content = content,
        backgroundColor = Color.Transparent
    )
}

Usage:

//Scaffold too should be more customizable (ex. modifier, scaffoldState)
@Composable
fun MySuperScaffold() {
    val colorsState = rememberSaveable { mutableStateOf(availableColors) }

    val shuffle: () -> Unit = {
        colorsState.value = availableColors.shuffled()
    }

    Scaffold(
        bottomBar = {
            BottomBarVerticalGradient(
                modifier = Modifier.height(56.dp).fillMaxWidth(),
                colors = colorsState.value
            ) {
                /* Your bottom bar content */
            }
        },
        content = { Button(onClick = shuffle) { Text("Shuffle") } },
    )
}

This looks like what I've been looking for. I'm a bit busy now but will have to test it and get back to you :) thanks — Saul, Feb 01 '22 at 12:47
Thanks for the multiple examples. This is exactly what I've been looking for. Also for providing the reading materials. It helped me understand better. Have a nice day :) — Saul, Feb 01 '22 at 17:23
@Saul You are welcome. Hope that the documentation answers many of you questions. — Sky, Feb 02 '22 at 03:22

Jetpack Compose function with lambda () -> Unit

1 Answers1