صور رمزية دائرية

جزء من قسم تطبيقك الأول في رحلة 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)),
          ),
        ),
      ),
    );
  }
}