Avatar Bulat

Termasuk bagian Aplikasi Pertamamu dalam perjalanan Flutter di Coddy. Pelajaran 28 dari 32.

Aplikasi sering menampilkan seseorang dalam bentuk lingkaran dengan foto atau inisialnya. Flutter memiliki widget khusus untuk itu, CircleAvatar:

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

radius: adalah setengah lebarnya, jadi lingkaran ini berdiameter 80 piksel. child:-nya berada di tengah. Untuk menggunakan foto sebagai pengganti inisial, gunakan backgroundImage: NetworkImage('https://...').

Tantangan

Mudah

Inisialnya berada di dalam persegi. Jadikan bentuknya lingkaran: ganti Container dengan CircleAvatar

dengan radius: 48
dan backgroundColor: Colors.teal
tetap gunakan Text yang sama sebagai child-nya

Coba sendiri

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