📊 Capítulo 08: Formulários & Validação no Compose

Especialização em Mobile Nativo Android

🗺️ O Fluxo de Validação Reativa com StateFlow e ViewModel

flowchart TD
    INPUT["Usuário digita no OutlinedTextField"]
    --> EVENT["viewModel.onEmailChanged(novoTexto)"]
    --> VM["ViewModel executa validador de Regex / Regras"]
    --> EMIT["StateFlow emite FormulárioUiState(email, erroEmail = 'E-mail inválido', isBotaoAtivo = false)"]
    --> RECOMPOSE["Compose atualiza a UI destacando o campo em vermelho e desativando o botão!"]

    style INPUT fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style EVENT fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style VM fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px
    style EMIT fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style RECOMPOSE fill:#ffebee,stroke:#d32f2f,stroke-width:2px

🎯 Slide 1: OutlinedTextField com Tratamento de Erros

OutlinedTextField(
    value = uiState.email,
    onValueChange = { viewModel.onEmailChanged(it) },
    label = { Text("E-mail corporativo") },
    isError = uiState.erroEmail != null,
    supportingText = {
        if (uiState.erroEmail != null) {
            Text(text = uiState.erroEmail, color = MaterialTheme.colorScheme.error)
        }
    },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email, imeAction = ImeAction.Next),
)

🎯 Slide 2: Gerenciamento de Foco com FocusRequester

val focusRequesterSenha = remember { FocusRequester() }

// No campo email:
keyboardActions = KeyboardActions(onNext = { focusRequesterSenha.requestFocus() })

// No campo senha:
modifier = Modifier.focusRequester(focusRequesterSenha)

🎯 Slide 3: Máscaras e Formatação com VisualTransformation

• Utilize PasswordVisualTransformation() para ocultar senhas com asteriscos e crie classes customizadas de VisualTransformation para aplicar formatação instantânea de CEP, CPF e Moeda Real sem alterar o valor puro salvo no ViewModel!