Visitenkarte: Stil

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

Die Teile sind an ihrem Platz. Jetzt sollen sie wie eine Karte aussehen: Der Name sollte als Erstes ins Auge fallen und der Beruf als unauffälligere Zeile darunter stehen.

Größe und Gewicht verleihen einer Zeile Bedeutung. Eine sanftere Farbe lässt eine Zeile in den Hintergrund treten. Etwas Abstand zwischen dem Avatar und dem Namen lässt beiden Raum zum Wirken.

Aufgabe

Einfach

Gestalte die Karte:

füge zwischen dem Avatar und dem Namen einen Abstand von 16 Pixeln ein
setze die Schriftgröße des Namens auf 28 und formatiere ihn fett
setze den Beruf auf Colors.blueGrey

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)),
              ),
              Text('Jordan Diaz'),
              Text('Flutter Developer'),
            ],
          ),
        ),
      ),
    );
  }
}