Tarjeta de presentación: Diseño

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

Es hora de ponerlo todo junto. En las próximas tres lecciones crearás una aplicación de tarjeta de presentación, el tipo de pantalla desde el que parte toda página de perfil.

Empieza con el diseño. Primero dibuja la pantalla como cajas: un avatar redondo arriba, después el nombre y luego el puesto, todo en una columna en el centro de la pantalla. Cuando las cajas estén en los lugares correctos, sigue el estilo.

Desafío

Fácil

Construye la tarjeta en el centro de la pantalla, como una Column (con mainAxisSize: MainAxisSize.min) formada por:

un CircleAvatar con radius: 48, backgroundColor: Colors.indigo y las iniciales JD como hijo, en blanco y con tamaño 32
el nombre, Jordan Diaz
el puesto de trabajo, Flutter Developer

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