Kartvizit: İletişim Bilgileri

Coddy'nin Flutter Journey'sinin İlk Uygulamanız bölümünün bir parçası. Ders 32 / 32.

Bir kartvizit iletişim kurmak içindir; bu nedenle son bölüm iletişim bilgileridir: beyaz bir panelde, her birinin yanında simgesi bulunan bir telefon numarası ve e-posta adresi.

Her iletişim satırı bir simgeden, küçük bir boşluktan ve metinden oluşan bir Row'dur. İki satır, dolgu ve yuvarlatılmış köşeler içeren bir Container'ın içindeki bir Column içine yerleştirilir. Tüm ekrandaki açık renkli arka plan, beyaz panelin öne çıkmasını sağlar:

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

Colors.indigo.shade50, indigonun en açık tonudur. Colors içindeki her rengin shade50 ile shade900 arasında tonları vardır.

Görev

Kolay

Kartı tamamla:

Scaffold öğesine Colors.indigo.shade50 değerinde bir backgroundColor: ver
meslek bilgisinin altına, bir SizedBox(height: 24) ekledikten sonra, 16 piksel dolgulu ve yuvarlatılmış köşelere sahip beyaz bir BoxDecoration içeren bir Container ekle
içine iki satırlı bir Column ekle: Icons.phone ile +1 555 0100 ve bunun altına Icons.email ile jordan@example.com

Kendin dene

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),
              ),
            ],
          ),
        ),
      ),
    );
  }
}