androidkotlinandroid-jetpack-compose

Render Problem with Kotlin Compose Preview


This is the code on MainActivity. I used the function Greeting that is @Composable and also @Preview so I can draw on then screen "Android" and see on Preview.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AlectricoTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background,
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Preview
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface(color = Color.Cyan) {
        Text(
            text = "Hi, my name is $name!",
        )
    }
}

I try to preview some text on screen, but system said "Render Problem".


Solution

  • The preview cannot be displayed because it needs a parameter for name. Previews only work when they have no parameters at all or when all their parameters have a default value1 (like the modifier parameter).

    Just add a default value for the name parameter, maybe like this:

    fun Greeting(name: String = "alectrico", modifier: Modifier = Modifier) {
        // ...
    }
    

    1 Another advanced option is to add a dedicated provider for the preview's parameters. For more details see https://developer.android.com/develop/ui/compose/tooling/previews#preview-data.