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?

Answer 1

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") } },
    )
}