Avatares redondos

Parte da seção Seu primeiro app do Journey de Flutter da Coddy. Lição 28 de 32.

Os aplicativos geralmente exibem uma pessoa em um círculo com sua foto ou suas iniciais. O Flutter tem um widget exatamente para isso: CircleAvatar:

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

radius: corresponde à metade da largura, então esse círculo tem 80 pixels de diâmetro. Seu child: fica no centro. Para usar uma foto em vez das iniciais, use backgroundImage: NetworkImage('https://...').

Desafio

Fácil

As iniciais estão em um quadrado. Transforme-o em um círculo: substitua o Container por um CircleAvatar

com radius: 48
e backgroundColor: Colors.teal
mantendo o mesmo Text como filho

Experimente você mesmo

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