Als nächstes sollten Sie Ihre Visitenkarten-App um ein Profilbild und Namen erweitern. Anhand der Bildschirmaufnahme können Sie sehen, dass das Layout vom oberen zum unteren Bildschirmrand geht. Sie werden für die Visitenkarten-App also ein Column-Widget verwenden.

Das Column-Widgets wird zusätzlich um ein Widget für das Profilbild und Widget für den Namen ergänzt. Als Startpunkt dient das folgende Codefragment.

                    
import 'package:flutter/material.dart';

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.lightBlue,
        body: SafeArea(
            child: Column(
          children: [
            CircleAvatar(
              radius: 50.0,
              backgroundColor: Colors.white,
            )
          ],
        )),
      ),
    );
  }
}

                

Das Column-Widget wird um ein CircleAvatar-Widget erweitert. Dieses Widget dient uns als Platzhalter für das Profilbild, welches Sie als Nächstes zur App hinzufügen werden.

Wenn die letzte Übung geglückt ist, sollte Ihre App nun ein Profilbild enthalten.

Namen hinzufügen

Der nächste Schritt besteht darin, Ihre App um einen Namen zu ergänzen. Erweitern Sie das Column-Widget um ein Text-Widget. Nach einem Hot-Reload sollte Ihr Name im Standardlayout unterhalb des Profilbilds erscheinen.

                    
import 'package:flutter/material.dart';

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.lightBlue,
        body: SafeArea(
            child: Column(
          children: [
            CircleAvatar(
              radius: 50.0,
              backgroundImage: AssetImage('assets/grumpy_cat.jpg'),
            ),
            Text('Grumpy Cat')
          ],
        )),
      ),
    );
  }
}

                

Namen formatieren

Das Standardlayout des Text-Widgets kommt ziemlich einfach daher. Sobald Sie Ihren Cursor im Code auf Text bewegen, schlägt Ihnen Visual Studio Code vor,  welche Eigenschaften sich von dem Text-Widget anpassen lassen.

Um die Formatierung des Texts zu ändern, müssen Sie eine Eigenschaft namens style festlegen, die vom Typ TextStyle ist. Sobald man das Text-Widget um diese Eigenschaft erweitert, präsentiert Visual Studio Code wieder alle verfügbaren Optionen.

Für unsere Visitenkarten-App wollen wir mal die Schriftgrösse, Farbe und Schriftstärke anpassen. Wir erweitern TextStyle-also um die Parameter fontSize, color und fontWeight.

                    
import 'package:flutter/material.dart';

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.lightBlue,
        body: SafeArea(
            child: Column(
          children: [
            CircleAvatar(
              radius: 50.0,
              backgroundImage: AssetImage('assets/grumpy_cat.jpg'),
            ),
            Text(
              'Grumpy Cat',
              style: TextStyle(
                fontSize: 40,
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            )
          ],
        )),
      ),
    );
  }
}

                

Nach einem weiteren Hot-Reload sieht unsere App schon wieder ein Stück ansprechender aus.

Selbständiges Arbeiten an Visitenkarten-App

Ab hier dürfen Sie gerne frei an Ihrer App weiterarbeiten. Probieren Sie benutzerdefinierte Schriftarten und Icons zu verwenden, um das Design Ihrer App ansprechender und farblich auffälliger zu gestalten. Sie können dazu die Flutter-Dokumentation nutzen.

Wenn Sie lieber unter Anleitung arbeiten, dürfen Sie gerne auch die nächsten zwei Kapitel bearbeiten, wo der Ausbau der Visitenkarten-App Schritt-für-Schritt beschrieben werden. Die fertige App sollte ungefähr so aussehen: