Building Multiplatform Weather App using KMM : Part 3 — Updating Data on Android UI

We already have ready function that will retrieve data from API (part 2). We will use it now, and update our UI on Android.

Lets modify our WeatherView, so that it will call API function and updating its UI when the data is ready.

There are 3 field data : name of the city, temperature and weather description. First step is to put all these into variable. And after API function called successfully, it will update these variable.

@Composable
fun WeatherView(api: WeatherAPI) {
    Column(modifier = Modifier.background(color = Color.Black)
        .padding(24.dp)) {

        // create variable to store data
        var name by remember { mutableStateOf("Montreal") }
        var temp by remember { mutableStateOf("19") }
        var descr by remember { mutableStateOf("Clear Sky") }

        // call api function & update variable when it is successful
        api.getWeatherAPIData(
            {
                name = it.name ?: ""
                temp = convertToC(it.main.temp ?: 0.00)
                descr = it.weather[0].description ?: ""
            },
            {
                name = it
                temp = ""
                descr = ""
            }
        )
        Text(name, style = MaterialTheme.typography.body1)
        Text("$temp° C", style = MaterialTheme.typography.h2)
        Text(descr, style = MaterialTheme.typography.body1)
    }
}