Okrągłe awatary

Część sekcji Twoja pierwsza aplikacja ścieżki Flutter w Coddy. Lekcja 28 z 32.

Aplikacje często pokazują osobę jako okrąg ze zdjęciem lub inicjałami. Flutter ma do tego specjalny widżet, CircleAvatar:

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

radius: to połowa szerokości, więc średnica tego okręgu wynosi 80 pikseli. Jego child: znajduje się pośrodku. Aby zamiast inicjałów użyć zdjęcia, zastosuj backgroundImage: NetworkImage('https://...').

Wyzwanie

Łatwy

Inicjały znajdują się na kwadracie. Zmień go w okrąg: zastąp Container elementem CircleAvatar

z radius: 48
i backgroundColor: Colors.teal
zachowując ten sam element Text jako jego element podrzędny

Spróbuj swoich sił

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