Cartão de Visita: Contatos

Parte da seção Seu primeiro app do Journey de Flutter da Coddy. Lição 32 de 32.

Um cartão de visita serve para entrar em contato, então a última parte são os dados de contato: um número de telefone e um e-mail, cada um com seu ícone, em um painel branco.

Cada linha de contato é uma Row com um ícone, um pequeno espaço e um texto. As duas linhas ficam em uma Column, dentro de um Container com preenchimento e cantos arredondados. Um fundo claro em toda a tela faz o painel branco se destacar:

Scaffold(
  backgroundColor: Colors.indigo.shade50,
  body: ...,
)

Colors.indigo.shade50 é o tom mais claro de índigo. Cada cor em Colors tem tons de shade50 a shade900.

Desafio

Fácil

Finalize o cartão:

defina backgroundColor: do Scaffold como Colors.indigo.shade50
abaixo do cargo, após um SizedBox(height: 24), adicione um Container com 16 pixels de preenchimento e um BoxDecoration branco com cantos arredondados
dentro dele, uma Column com duas linhas: Icons.phone com +1 555 0100 e, abaixo, Icons.email com jordan@example.com

Experimente você mesmo

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              CircleAvatar(
                radius: 48,
                backgroundColor: Colors.indigo,
                child: Text('JD', style: TextStyle(fontSize: 32, color: Colors.white)),
              ),
              SizedBox(height: 16),
              Text(
                'Jordan Diaz',
                style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
              ),
              Text(
                'Flutter Developer',
                style: TextStyle(color: Colors.blueGrey),
              ),
            ],
          ),
        ),
      ),
    );
  }
}