Biglietto da visita: Stile

Fa parte della sezione La tua prima app del percorso Flutter di Coddy. Lezione 31 di 32.

Le parti sono al loro posto. Ora fai in modo che sembrino una scheda: il nome dovrebbe essere la prima cosa che salta all’occhio e il ruolo una riga più discreta sotto.

Le dimensioni e lo spessore del carattere danno importanza a una riga. Un colore più tenue la fa passare in secondo piano. Un po’ di spazio tra l’avatar e il nome permette a entrambi di risaltare.

Sfida

Facile

Stilizza la scheda:

metti 16 pixel di spazio tra l'avatar e il nome
imposta la dimensione del nome a 28 e in grassetto
imposta il colore del lavoro su Colors.blueGrey

Provalo tu

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