כרטיס ביקור: פרטי קשר

חלק מהיחידה האפליקציה הראשונה שלך במסלול ה-Flutter של Coddy. שיעור 32 מתוך 32.

כרטיס ביקור נועד ליצירת קשר, לכן החלק האחרון הוא פרטי יצירת הקשר: מספר טלפון וכתובת דוא״ל, כל אחד עם סמל משלו, על גבי לוח לבן.

כל שורת פרטי קשר היא Row ובה סמל, רווח קטן וטקסט. שתי השורות נמצאות בתוך Column, שבתורו נמצא בתוך Container עם שוליים פנימיים ופינות מעוגלות. רקע בהיר בכל המסך גורם ללוח הלבן לבלוט:

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

Colors.indigo.shade50 הוא הגוון הבהיר ביותר של אינדיגו. לכל צבע ב-Colors יש גוונים מ-shade50 ועד shade900.

אתגר

קל

השלימו את הכרטיס:

הגדירו ל-Scaffold את backgroundColor: לערך Colors.indigo.shade50
מתחת לתפקיד, אחרי SizedBox(height: 24), הוסיפו Container עם ריווח פנימי של 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),
              ),
            ],
          ),
        ),
      ),
    );
  }
}