תמונות פרופיל עגולות

חלק מהיחידה האפליקציה הראשונה שלך במסלול ה-Flutter של Coddy. שיעור 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)),
          ),
        ),
      ),
    );
  }
}