🎨 P04: Cartão de Treinador Pokémon

Bem-vindo ao futuro! Este é o seu primeiro projeto usando Jetpack Compose. Esqueça o XML! Aqui você desenha a tela escrevendo funções em Kotlin. É mais rápido, mais bonito e muito mais divertido.

---

🎯 Objetivo do Projeto

Criar um cartão de identificação (ID Card) de treinador Pokémon. O cartão deve ter sua foto, seu nome, seu nível e uma lista dos seus 3 Pokémons favoritos.

---

📖 Dicionário do Projeto

• Compose: O novo jeito de criar telas do Android.

• Column: Organiza os itens um embaixo do outro (como uma coluna).

• Row: Organiza os itens um ao lado do outro (como uma linha).

• Image / AsyncImage: Usado para mostrar fotos.

• Modifier: É o “personalizador”. Usamos ele para mudar tamanhos, cores de fundo e arredondar bordas.

---

🏗️ Passo a Passo (Wizard do Android Studio)

1. Template: Empty Compose Activity. (⚠️ Muito importante selecionar este!)

2. Name: AppCartaoTreinador_SeuNome.

3. Package Name: br.com.curso.cartaotreinador.

4. Language: Kotlin.

---

🎨 Parte 1: O Layout Moderno

No Compose, não temos arquivos separados para o desenho. Tudo acontece no MainActivity.kt.

Estrutura Sugerida:

1. CardPrincipal: Uma caixa com bordas arredondadas e sombra.

2. FotoPerfil: Uma imagem circular.

3. InfoTreinador: Nome em negrito e Nível.

---

✅ Gabarito Comentado (UI Layer)

NOTE

Os assets (imagens) para este projeto já estão disponíveis na pasta app/src/main/res/drawable. Você pode usar trainer_avatar, pikachu, charizard e blastoise.

@Composable
fun CartaoTreinador() {
    Card(
        modifier = Modifier.padding(16.dp).fillMaxWidth(),
        shape = RoundedCornerShape(16.dp),
        elevation = CardDefaults.cardElevation(8.dp)
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // Foto Circular
            Image(
                painter = painterResource(id = R.drawable.trainer_avatar),
                contentDescription = "Sua Foto",
                modifier = Modifier.size(100.dp).clip(CircleShape)
            )
 
            Spacer(modifier = Modifier.height(10.dp))
 
            // Textos
            Text(text = "TREINADOR: ASH KETCHUM", fontWeight = FontWeight.Bold, fontSize = 20.sp)
            Text(text = "NÍVEL: 15", color = Color.Gray)
 
            Divider(modifier = Modifier.padding(vertical = 10.dp))
 
            // Seus Pokemons
            Text(text = "MEU TIME:", fontSize = 14.sp)
            Row {
                Image(painter = painterResource(id = R.drawable.pikachu), contentDescription = "Pikachu", modifier = Modifier.size(40.dp))
                Image(painter = painterResource(id = R.drawable.charizard), contentDescription = "Charizard", modifier = Modifier.size(40.dp))
                Image(painter = painterResource(id = R.drawable.blastoise), contentDescription = "Blastoise", modifier = Modifier.size(40.dp))
            }
        }
    }
}

---

📂 Organização de Pastas (Padrão TecPro)

br.com.curso.cartaotreinador.ui.screens → Crie o arquivo TrainerCardScreen.kt aqui.

br.com.curso.cartaotreinador.ui.theme → Onde moram as cores do seu cartão.

---

🎨 Sugestão de Figma

Desenhe um cartão com cores que lembrem uma Pokebola (Vermelho, Branco e Preto). Use fontes modernas como ‘Roboto’ ou ‘Inter’.

---

??? Requisitos de Configuração e Solução de Problemas

Se você encontrar erros ao tentar rodar este projeto, verifique os pontos abaixo:

1. Sintaxe do XML (Para projetos com XML)

No Android, dimensões não aceitam pontos decimais.

• ? Errado: android:padding=“16.dp”

• ? Correto: android:padding=“16dp”

2. Suporte ao AndroidX

O arquivo gradle.properties na raiz do projeto deve conter:

android.useAndroidX=true

android.enableJetifier=true

3. Estrutura de Pastas

O código fonte deve estar dentro de um módulo chamado app:

NomeDoProjeto/app/src/main/…

4. Recursos Obrigatórios

Certifique-se de ter os arquivos em res/values: colors.xml, strings.xml, themes.xml.

5. Configuração do Gradle

O arquivo settings.gradle na raiz deve conter include ‘:app’.