圆形头像

本课属于 Coddy Flutter 学习旅程的“你的第一个应用”单元。第 28 课，共 32 课。

应用通常会用一个圆形头像显示人物，里面放照片或姓名首字母。Flutter 有一个专门用于此目的的组件：CircleAvatar：

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

radius: 是圆形头像宽度的一半，所以这个圆的直径是 80 像素。它的 child: 位于中间。要用照片代替姓名首字母，可以使用 backgroundImage: NetworkImage('https://...')。

挑战

简单

首字母显示在一个方形区域中。把它改成圆形：将 Container 替换为 CircleAvatar

设置 radius: 48
并设置 backgroundColor: Colors.teal
保留相同的 Text 作为其子元素

亲手试试

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