Tarjeta de presentación: Contactos

Parte de la sección Tu primera app del Journey de Flutter de Coddy. Lección 32 de 32.

Una tarjeta de presentación sirve para ponerse en contacto, así que la última parte son los datos de contacto: un número de teléfono y un correo electrónico, cada uno con su icono, en un panel blanco.

Cada línea de contacto es una Row con un icono, un pequeño espacio y un texto. Las dos filas van en una Column, dentro de un Container con relleno y esquinas redondeadas. Un fondo claro en toda la pantalla hace que el panel blanco destaque:

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

Colors.indigo.shade50 es el tono más claro del índigo. Cada color de Colors tiene tonos desde shade50 hasta shade900.

Desafío

Fácil

Termina la tarjeta:

asigna al Scaffold un backgroundColor: de Colors.indigo.shade50
debajo del puesto, después de un SizedBox(height: 24), agrega un Container con 16 píxeles de relleno y un BoxDecoration blanco con esquinas redondeadas
dentro, una Column de dos filas: Icons.phone con +1 555 0100 y, debajo, Icons.email con jordan@example.com

Pruébalo tú mismo

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),
              ),
            ],
          ),
        ),
      ),
    );
  }
}