Biglietto da visita: Contatti

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

Un biglietto da visita serve per mettersi in contatto, quindi l’ultima parte contiene i dettagli di contatto: un numero di telefono e un indirizzo email, ciascuno con la propria icona, su un pannello bianco.

Ogni riga di contatto è una Row con un’icona, un piccolo spazio e del testo. Le due righe sono contenute in una Column, all’interno di un Container con imbottitura e angoli arrotondati. Uno sfondo chiaro sull’intero schermo fa risaltare il pannello bianco:

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

Colors.indigo.shade50 è la tonalità più chiara dell’indaco. Ogni colore in Colors ha tonalità da shade50 a shade900.

Sfida

Facile

Completa la scheda:

assegna allo Scaffold un backgroundColor: pari a Colors.indigo.shade50
sotto il lavoro, dopo un SizedBox(height: 24), aggiungi un Container con 16 pixel di padding e un BoxDecoration bianco con angoli arrotondati
al suo interno, una Column di due righe: Icons.phone con +1 555 0100 e, sotto, Icons.email con jordan@example.com

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)),
              ),
              SizedBox(height: 16),
              Text(
                'Jordan Diaz',
                style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
              ),
              Text(
                'Flutter Developer',
                style: TextStyle(color: Colors.blueGrey),
              ),
            ],
          ),
        ),
      ),
    );
  }
}