Visitenkarte: Kontaktdaten

Teil des Abschnitts Deine erste App der Flutter-Journey von Coddy. Lektion 32 von 32.

Eine Visitenkarte dient dazu, Kontakt aufzunehmen. Deshalb besteht der letzte Teil aus den Kontaktdaten: einer Telefonnummer und einer E-Mail-Adresse, jeweils mit einem Symbol, auf einem weißen Feld.

Jede Kontaktzeile ist eine Row mit einem Symbol, einem kleinen Abstand und einem Text. Die beiden Zeilen kommen in eine Column>, innerhalb eines <code>Container mit Innenabstand und abgerundeten Ecken. Ein heller Hintergrund auf dem gesamten Bildschirm hebt das weiße Feld hervor:

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

Colors.indigo.shade50 ist der hellste Indigoton. Jede Farbe in Colors hat Abstufungen von shade50 bis shade900.

Aufgabe

Einfach

Vervollständige die Karte:

gib dem Scaffold eine backgroundColor: von Colors.indigo.shade50
füge unter dem Beruf nach einer SizedBox(height: 24) einen Container mit 16 Pixeln Innenabstand und einer weißen BoxDecoration mit abgerundeten Ecken hinzu
füge darin eine Column mit zwei Zeilen ein: Icons.phone mit +1 555 0100 und darunter Icons.email mit jordan@example.com

Probier es selbst

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