Round Avatars

Part of the Your First App section of Coddy's Flutter journey. Lesson 28 of 32.

Apps often show a person as a circle with their picture or their initials. Flutter has a widget for exactly that, CircleAvatar:

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

radius: is half its width, so this circle is 80 pixels across. Its child: sits in the middle. With a picture instead of initials, use backgroundImage: NetworkImage('https://...').

Challenge

Easy

The initials sit on a square. Make it a circle: replace the Container with a CircleAvatar

with radius: 48
and backgroundColor: Colors.teal
keeping the same Text as its child

Try it yourself

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