Kartu Nama: Kontak

Termasuk bagian Aplikasi Pertamamu dalam perjalanan Flutter di Coddy. Pelajaran 32 dari 32.

Kartu nama digunakan agar orang bisa menghubungimu, jadi bagian terakhirnya adalah detail kontak: nomor telepon dan email, masing-masing dengan ikonnya, pada panel putih.

Setiap baris kontak adalah Row yang berisi ikon, sedikit jarak, dan teks. Kedua baris ditempatkan dalam Column, di dalam Container dengan padding dan sudut membulat. Latar belakang terang pada seluruh layar membuat panel putih lebih menonjol:

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

Colors.indigo.shade50 adalah warna indigo paling terang. Setiap warna di Colors memiliki gradasi dari shade50 hingga shade900.

Tantangan

Mudah

Selesaikan kartu:

beri Scaffold backgroundColor: dengan nilai Colors.indigo.shade50
di bawah pekerjaan, setelah SizedBox(height: 24), tambahkan Container dengan padding sebesar 16 piksel dan BoxDecoration putih dengan sudut membulat
di dalamnya, buat Column yang terdiri dari dua baris: Icons.phone dengan +1 555 0100, lalu di bawahnya Icons.email dengan jordan@example.com

Coba sendiri

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