Visitenkarte: Layout

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

Jetzt fügen wir alles zusammen. In den nächsten drei Lektionen erstellst du eine Visitenkarten-App, die Art von Bildschirm, mit der jede Profilseite beginnt.

Beginne mit dem Layout. Skizziere den Bildschirm zuerst als Kästen: oben ein rundes Avatarbild, dann der Name, dann der Beruf, alles in einer Spalte in der Mitte des Bildschirms. Sobald die Kästen an den richtigen Stellen sind, folgt der Stil.

Aufgabe

Einfach

Erstelle die Karte in der Mitte des Bildschirms als Column (mit mainAxisSize: MainAxisSize.min) aus:

einem CircleAvatar mit radius: 48, backgroundColor: Colors.indigo und den Initialen JD als untergeordnetem Element, in Weiß, Größe 32
dem Namen Jordan Diaz
dem Beruf Flutter Developer

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