Yuvarlak Avatarlar

Coddy'nin Flutter Journey'sinin İlk Uygulamanız bölümünün bir parçası. Ders 28 / 32.

Uygulamalarda bir kişi genellikle fotoğrafı veya baş harfleriyle birlikte bir daire içinde gösterilir. Flutter'da tam da bunun için bir bileşen vardır: CircleAvatar:

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

radius: genişliğinin yarısıdır; bu nedenle dairenin çapı 80 pikseldir. child: ortasında yer alır. Baş harfleri yerine fotoğraf kullanmak için backgroundImage: NetworkImage('https://...') kullanın.

Görev

Kolay

Baş harfler bir kare üzerinde duruyor. Onu daire yap: Container yerine CircleAvatar kullan

radius: 48 ile
ve backgroundColor: Colors.teal ile
çocuk öğesi olarak aynı Text öğesini koruyarak

Kendin dene

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