بطاقة العمل: معلومات الاتصال

جزء من قسم تطبيقك الأول في رحلة Flutter على Coddy. الدرس 32 من 32.

بطاقة العمل مخصّصة للتواصل، لذا فإن الجزء الأخير هو تفاصيل الاتصال: رقم هاتف وبريد إلكتروني، ولكلٍّ منهما أيقونته، على لوحة بيضاء.

كل سطر من معلومات الاتصال هو Row يتكوّن من أيقونة، ومسافة صغيرة، ونص. يوضع السطران في Column، داخل Container مع حشوة وزوايا مستديرة. تجعل الخلفية الفاتحة للشاشة بأكملها اللوحة البيضاء بارزة:

Scaffold(
  backgroundColor: Colors.indigo.shade50,
  body: ...,
)

Colors.indigo.shade50 هو أفتح درجة من اللون النيلي. لكل لون في Colors درجات من shade50 إلى shade900.

التحدي

سهل

أكمل البطاقة:

اجعل قيمة backgroundColor: في Scaffold هي Colors.indigo.shade50
أسفل الوظيفة، وبعد SizedBox(height: 24)، أضف Container مع مساحة padding مقدارها 16 بكسل وBoxDecoration بيضاء بزوايا مستديرة
بداخله، Column يتكون من صفين: Icons.phone مع +1 555 0100، وأسفله Icons.email مع jordan@example.com

جرّب بنفسك

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: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              CircleAvatar(
                radius: 48,
                backgroundColor: Colors.indigo,
                child: Text('JD', style: TextStyle(fontSize: 32, color: Colors.white)),
              ),
              SizedBox(height: 16),
              Text(
                'Jordan Diaz',
                style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
              ),
              Text(
                'Flutter Developer',
                style: TextStyle(color: Colors.blueGrey),
              ),
            ],
          ),
        ),
      ),
    );
  }
}