Avatar rotondi

Fa parte della sezione La tua prima app del percorso Flutter di Coddy. Lezione 28 di 32.

Le app spesso mostrano una persona in un cerchio con la sua foto o le sue iniziali. Flutter ha un widget proprio per questo, CircleAvatar:

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

radius: è la metà della sua larghezza, quindi questo cerchio misura 80 pixel da un lato all’altro. Il suo child: si trova al centro. Per usare una foto invece delle iniziali, usa backgroundImage: NetworkImage('https://...').

Sfida

Facile

Le iniziali si trovano su un quadrato. Trasformalo in un cerchio: sostituisci il Container con un CircleAvatar

con radius: 48
e backgroundColor: Colors.teal
mantenendo lo stesso Text come figlio

Provalo tu

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