Carte de visite : Contacts

Fait partie de la section Votre première application du Journey Flutter de Coddy. Leçon 32 sur 32.

Une carte de visite sert à entrer en contact ; la dernière partie contient donc les coordonnées : un numéro de téléphone et une adresse e-mail, chacun accompagné de son icône, sur un panneau blanc.

Chaque ligne de coordonnées est une Row composée d’une icône, d’un petit espace et d’un texte. Les deux lignes sont placées dans une Column, à l’intérieur d’un Container avec du rembourrage et des coins arrondis. Un arrière-plan clair sur tout l’écran fait ressortir le panneau blanc :

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

Colors.indigo.shade50 est la nuance d’indigo la plus claire. Chaque couleur de Colors possède des nuances allant de shade50 à shade900.

Défi

Facile

Termine la carte :

donne au Scaffold un backgroundColor: de Colors.indigo.shade50
sous le poste, après un SizedBox(height: 24), ajoute un Container avec 16 pixels de marge intérieure et une BoxDecoration blanche avec des coins arrondis
à l’intérieur, une Column de deux lignes : Icons.phone avec +1 555 0100, et en dessous Icons.email avec jordan@example.com

Essayez vous-même

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