Ảnh đại diện tròn

Thuộc phần Ứng dụng đầu tiên trong hành trình Flutter của Coddy. Bài học 28 trên 32.

Các ứng dụng thường hiển thị một người trong hình tròn, bên trong là ảnh hoặc chữ cái đầu tên của họ. Flutter có một widget dành riêng cho việc này, CircleAvatar:

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

radius: bằng một nửa chiều rộng, nên hình tròn này rộng 80 pixel. child: nằm ở giữa. Để dùng ảnh thay cho chữ cái đầu tên, hãy dùng backgroundImage: NetworkImage('https://...').

Thử thách

Dễ

Các chữ cái đầu nằm trên một hình vuông. Hãy biến nó thành hình tròn: thay Container bằng CircleAvatar

với radius: 48
và backgroundColor: Colors.teal
giữ nguyên Text làm phần tử con

Tự làm thử

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