Runde Avatare

Teil des Abschnitts Deine erste App der Flutter-Journey von Coddy. Lektion 28 von 32.

Apps zeigen eine Person oft als Kreis mit ihrem Bild oder ihren Initialen. Flutter hat genau dafür ein Widget, CircleAvatar:

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

radius: ist die Hälfte der Breite, daher ist dieser Kreis 80 Pixel breit. Sein child: sitzt in der Mitte. Wenn du statt Initialen ein Bild verwenden möchtest, nutze backgroundImage: NetworkImage('https://...').

Aufgabe

Einfach

Die Initialen befinden sich auf einem Quadrat. Mach daraus einen Kreis: Ersetze den Container durch einen CircleAvatar

mit radius: 48
und backgroundColor: Colors.teal
behalte dasselbe Text als untergeordnetes Element bei

Probier es selbst

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