Carte de visite : Style

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

Les éléments sont en place. Maintenant, fais-les ressembler à une carte : le nom doit être la première chose qui attire le regard, et le métier, une ligne plus discrète en dessous.

La taille et l’épaisseur donnent de l’importance à une ligne. Une couleur plus douce la fait passer au second plan. Un peu d’espace entre l’avatar et le nom permet à chacun de respirer.

Défi

Facile

Stylisez la carte :

ajoutez 16 pixels d’espace entre l’avatar et le nom
définissez la taille du nom sur 28 et mettez-le en gras
définissez la couleur du poste sur Colors.blueGrey

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