Tarjeta de presentación: Estilo

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

Las partes están en su sitio. Ahora haz que parezcan una tarjeta: el nombre debe ser lo primero que capte la mirada, y el puesto, una línea más discreta debajo.

El tamaño y el grosor hacen que una línea destaque. Un color más suave hace que pase a un segundo plano. Un poco de espacio entre el avatar y el nombre permite que cada uno respire.

Desafío

Fácil

Da estilo a la tarjeta:

pon 16 píxeles de espacio entre el avatar y el nombre
haz que el tamaño del nombre sea 28 y ponlo en negrita
haz que el trabajo sea Colors.blueGrey

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)),
              ),
              Text('Jordan Diaz'),
              Text('Flutter Developer'),
            ],
          ),
        ),
      ),
    );
  }
}