Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Usando el componente Surface

12/26
Recursos

Aportes 4

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Colores 🎨

val PlatziBlue = Color(0xFF12203D)
val PlatziGreen = Color(0xFF98C93E)

Para el caso de tener separados los la flag y el precio yo lo implemente de esta manera:

Row (
  modifier = Modifier.fillMaxWidth(),
  horizontalArrangement.SpaceBetween
) {
  Image (
    painter = painterResource(id = R.drawable.flagco),
    contentDescription = null
  )
  Text (text = "$ 35 USD")
}

Lo que se lleva hasta el momento

package com.example.coffecodersmexico.ui.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.Card
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.coffecodersmexico.R
import com.example.coffecodersmexico.ui.theme.PlatziBlue
import com.example.coffecodersmexico.ui.theme.PlatziGreen


/*
* 1. Se creo un paquete dentro del paquete ui
* 2. Se nombro el paquete como components
* 3. Se creo el archivo en kotlin de ProductCard.kt*/

@Composable
fun ProductCard(){
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { }
            .size(480.dp),
        elevation = 10.dp,//varias propiedades a la vez
        shape = MaterialTheme.shapes.small
            

    ){
        Image(painter = painterResource(id = R.drawable.co), contentDescription = null)
        /*La utilizacion del componente Surface*/
        Surface(
            modifier = Modifier.fillMaxWidth(),
            color = PlatziBlue.copy(alpha = 0.02f)
        ) {

            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.padding(16.dp)
            ) {
                Text("Cafe de Colombia")
                Text("Cafe de las montañas")
                Column(
                    modifier = Modifier.fillMaxSize(),
                    verticalArrangement = Arrangement.Bottom
                ) {
                    //Componente Row
                    
                    Row() {
                        Image(painter = painterResource(id = R.drawable.flagco),
                        contentDescription = null)
                        Text("$ 35 USD", modifier = Modifier.fillMaxWidth(),
                        textAlign = TextAlign.End)

                    }


                }
            }

        }


    }
}

@Preview(
    showBackground = true
)
@Composable
fun ProductCardPreview(){
    ProductCard()
}

WOW! 😮