Jetpack Compose: Getting Started

Now, you have learned how to add Texts and order Composables within your application. In this challenge episode, you are tasked to do the following:

Food Details

• Create a new Kotlin file called FoodDetails.kt in the screens package.
• Add a new Composable called FoodDetails that will receive a foodId parameter which will be a nullable Int with the default value being 0.
• Add a Column to the FoodDetails Composable.
• Add a Text Composable to the Column with the text representing the food name.
• Add another Text Composable to the Column with the text indicating the text: “About Food”.
• Finally, add a Text Composable to the Column with the text representing the food description.

Food Details Measure

Additionally, you will need to setup a custom Composable for the FoodDetailMeasure that will receive three parameters: icon, text and iconColor. This Composable will have an icon and text arranged horizontally.

• Create a new Kotlin file called FoodDetailMeasure.kt in the components package.
• Add a new Composable called FoodDetailMeasure that will receive three parameters: icon, text and iconColor.
• Add a Row to the FoodDetailMeasure Composable (Ensure all items are aligned vertically central).
• For now, add two Text Composables to the Row with the text representing the icon and text parameters.

Take time and pause the video and try to implement the above tasks. Once you are done, you can resume the video and compare your solution with the one provided.

Food Details

FoodDetails.kt

@Composable
fun FoodDetails(
    foodId: Int? = 0
){
    val food = getFood()[ foodId ?: 0 ]
    Column(
        modifier = Modifier
            .padding(top = 110.dp, start = 16.dp, end = 16.dp),) {

                Text(
                    modifier = Modifier
                        .fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = food.name,
                    style = MaterialTheme.typography.displaySmall,
                    fontWeight = FontWeight.ExtraBold)

                Text(
                    text = "About Food",
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.padding(top = 50.dp))

                Text(
                    modifier = Modifier.padding(top = 16.dp),
                    text = food.description,
                    style = MaterialTheme.typography.bodyMedium,
                    fontWeight = FontWeight.Medium)

    }
}

Food Details Measure

@Composable
fun FoodDetailMeasure(
    @DrawableRes icon: Int,
    text: String,
    iconColor: Color
) {

    Row(modifier = Modifier, verticalAlignment = Alignment.CenterVertically) {

        Text(
            text = text, 
            style = MaterialTheme.typography.bodyLight, 
            fontWeight = FontWeight.Light)

        Text(
            text = text, 
            style = MaterialTheme.typography.bodyMedium, 
            fontWeight = FontWeight.Medium)

    }

}

Great job, our application is beginning to take shape. In the next episode, we will learn more about how we can organize our application uisng advanced Row and Column modifiers.