Android Composable Text breaks preview when it receives a Color parameter. Is there a workaround?

Issue

On any Android Studio version up to Bumblebee 2011.1.1 Canary 11, the following View does not render and in fact breaks the Previewer in unexpected ways.

@Preview
@Composable
fun ColoredText(color: Color = Color.Red) = Text("text")

Stable version of Arctic Fox throws a MethodNotFoundError while the canary throws a warning saying it can't find the View. How can I get the preview to work again?

Solution

With @Preview Composables the main restriction is that the Preview Composable functions must not take any parameters.

Your ColoredText composable takes color: Color = Color.Red as a parameter hence doesn't render. You will also see the @Preview Annotation on your code highlighted in red.

To preview your code you can make a preview composable named ColoredTextPreview() which doesn't accept any parameter. Use this to preview the ColoredText() and pass in the Color Parameter

@Preview
@Composable
//preview doesn't accept parameters
fun ColoredTextPreview() = ColoredText(Color.Red)

@Composable
//create a 2nd non-preview composable that accepts parameters
fun ColoredText(color1: Color = Color.Red) {
    Text(
        text = "text",
        color = color1,
        modifier = Modifier.fillMaxWidth()
    )
}

Be sure to include this line of code on your import statements to help with the Colors.

import androidx.compose.ui.graphics.Color

Thanks,

Answered By - Tonnie