Wizytówka: Dane kontaktowe

Część sekcji Twoja pierwsza aplikacja ścieżki Flutter w Coddy. Lekcja 32 z 32.

Wizytówka służy do nawiązywania kontaktu, dlatego ostatnią częścią są dane kontaktowe: numer telefonu i adres e-mail, każdy z własną ikoną, na białym panelu.

Każdy wiersz z danymi kontaktowymi to Row zawierający ikonę, niewielki odstęp i tekst. Dwa wiersze umieść w Column, wewnątrz Container z wypełnieniem i zaokrąglonymi rogami. Jasne tło całego ekranu sprawia, że biały panel się wyróżnia:

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

Colors.indigo.shade50 to najjaśniejszy odcień indygo. Każdy kolor w Colors ma odcienie od shade50 do shade900.

Wyzwanie

Łatwy

Dokończ kartę:

ustaw dla Scaffold wartość backgroundColor: na Colors.indigo.shade50
pod stanowiskiem, po SizedBox(height: 24), dodaj Container z wypełnieniem o wartości 16 pikseli oraz białym BoxDecoration z zaokrąglonymi rogami
umieść w nim Column z dwoma wierszami: Icons.phone z numerem +1 555 0100, a pod nim Icons.email z adresem jordan@example.com

Spróbuj swoich sił

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