Avatars ronds

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

Les applications affichent souvent une personne dans un cercle avec sa photo ou ses initiales. Flutter possède un widget conçu précisément pour cela, CircleAvatar :

CircleAvatar(
  radius: 40,
  backgroundColor: Colors.deepPurple,
  child: Text('MJ'),
)

radius: correspond à la moitié de sa largeur : ce cercle mesure donc 80 pixels de diamètre. Son child: est placé au centre. Pour afficher une photo à la place des initiales, utilisez backgroundImage: NetworkImage('https://...').

Défi

Facile

Les initiales sont placées sur un carré. Transforme-le en cercle : remplace le Container par un CircleAvatar

avec radius: 48
et backgroundColor: Colors.teal
en conservant le même Text comme enfant

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: Container(
            padding: EdgeInsets.all(24),
            color: Colors.teal,
            child: Text('AL', style: TextStyle(fontSize: 32, color: Colors.white)),
          ),
        ),
      ),
    );
  }
}