Carte de visite : Mise en page

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

Il est temps de tout mettre ensemble. Dans les trois prochaines leçons, tu vas créer une application de carte de visite, le type d’écran qui sert de point de départ à toute page de profil.

Commence par la mise en page. Dessine d’abord l’écran sous forme de blocs : un avatar rond en haut, puis le nom, puis le métier, le tout dans une seule colonne au milieu de l’écran. Une fois les blocs placés au bon endroit, tu peux passer au style.

Défi

Facile

Construis la carte au milieu de l’écran, sous forme de Column (avec mainAxisSize: MainAxisSize.min) composée de :

un CircleAvatar avec radius: 48, backgroundColor: Colors.indigo et les initiales JD comme enfant, en blanc, taille 32
le nom, Jordan Diaz
le métier, Flutter Developer

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