둥근 아바타

Coddy Flutter 여정의 첫 앱 만들기 섹션에 포함된 레슨. 32개 중 28번째.

앱에서는 사람을 사진이나 이니셜이 들어간 원으로 표시하는 경우가 많습니다. 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)),
          ),
        ),
      ),
    );
  }
}