3.5 Facelift der Visitenkarten-App (freiwillig)
Unsere App sieht schon fast aus wie das ursprünglich geplante Produkt. In diesem Abschnitt geht es primär um kosmetische Details. Zum Beispiel möchten wir bei den Textboxen gerundete Ecken und ein bisschen Schatten hinzufügen. Wir könnten also entweder versuchen unsere bestehende App um diese Details zu erweitern, oder wir könnten einfach die vorgefertigte Card-Widget-Klasse verwenden, die Sie bereits von der Rezept-App kennen.
Als Erstes ersetzen Sie dazu im Code Ihre Container-Widgets durch Card-Widgets. Und das erste, was Ihnen dabei auffallen wird, ist, dass im Code plötzlich einige rote Linien erscheinen. Das liegt daran, dass das Card-Widget keine padding Eigenschaft besitzt.
Was können Sie tun, wenn Sie ein Widget besitzen, welches die padding Eigenschaft nicht besitzt? Sie könnten entweder Gebrauch von der Padding-Klasse machen oder Sie weichen direkt auf die ListTile-Klasse aus, welche häufig für die Darstellung von Icons und Text verwendet wird.
Da Sie jetzt eine Lösung für unser Padding Dilemma besitzen, können Sie getrost die Zeilen im Code mit padding löschen.
Wenn Sie in Ihrer App ein ListTile-Widget verwenden, können Sie auch auf die Row-Widgets verzichten. Am schnellsten kann man die Anpassungen im Code vornehmen, indem man den Code des ersten Row-Widgets inklusive Inhalt aus dem Code ausschneidet und zuunterst im Texteditor wieder einfügt. Im Card-Widget können Sie anschliessend als child-Widget ein ListTile-Widget hinzufügen. Sobald Sie im Texteditor ListTile eintippen, werden die Eigenschaften dieses Widgets eingeblendet.
Über die widget leading Eigenschaft kann man steuern, welches Widget in der Visitenkarten-App als Erstes dargestellt wird. In Ihrem Fall entspricht dies dem Icon. Die widget title Eigenschaft werden Sie für Ihren Text verwenden. Von unserem ersten ausgeschnittenen Row-Widget am Ende des Quellcodes kopieren Sie also den Icon-Teil in die leading Eigenschaft und den Text-Teil in die title Eigenschaft. Den Rest des ausgeschnittenen ersten Row-Widget-Codes können Sie wieder löschen (das SizedBox-Widget brauchen Sie durch Verwendung des Card-Widgets auch nicht mehr). Im Code sieht das Ganze wie folgt aus:
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(
fontFamily: 'Pacifico',
fontSize: 40,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Text(
'GUTE LAUNE VERBREITER',
style: TextStyle(
fontFamily: 'Source Sans Pro',
color: Colors.lightBlue.shade100,
fontSize: 20,
letterSpacing: 2.5,
fontWeight: FontWeight.bold,
),
),
Card(
color: Colors.white,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 25),
child: ListTile(
leading: Icon(
Icons.phone_outlined,
color: Colors.lightBlue.shade900,
),
title: Text(
'+41 777 77 77',
style: TextStyle(
color: Colors.lightBlue.shade900,
fontFamily: 'Source Sans Pro',
fontSize: 20,
),
)
)
),
Card(
color: Colors.white,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 25),
child: Row(
children: [
Icon(
Icons.email_outlined,
color: Colors.lightBlue.shade900,
),
SizedBox(
width: 10,
),
Text(
'grumpy@miau.ch',
style: TextStyle(
color: Colors.lightBlue.shade900,
fontFamily: 'Source Sans Pro',
fontSize: 20,
),
)
],
),
)
],
)),
),
);
}
}
Und in der Bildschirmaufnahme lassen sich die abgerundeten Ecken und der Schatten an der ersten Textbox gut erkennen.
Übung
Zweites ListTile-Widgets hinzufügen
Wiederholen Sie die gleichen Schritte für das zweite Row-Widget. Also schneiden Sie die Codezeilen des zweiten Row-Widgets aus und fügen Sie diesen Code wieder ganz unten ein. Fügen Sie danach dort wo der Row-Widget Code war wieder ein ListTile-Widget ein und kopieren den Code des E-Mail-Icons und der E-Mail-Adresse in dieses ListTile-Widget.
Das Resultat müsste wie folgt aussehen.
Übung
App-Inhalt zentrieren
Finden Sie mit Hilfe der Column-Klassen-Dokumentation heraus über welche Eigenschaft sich Ihre App-Inhalte zentrieren lassen. Probieren Sie anschliessend über diese Eigenschaft im Code alles auf die Bildschirmmitte zu zentrieren.
Jetzt sind alle unsere App-Inhalte zentriert und das Ganze sieht schon viel mehr nach einer Visitenkarte aus.
Divider einfügen
Zum Schluss könnten Sie noch eine feine Linie zwischen der Rolle und den Textboxen einfügen. Für diese feine Linie können Sie wieder ein SizedBox-Widget verwenden und teilen diesem als Kind ein Divider-Widget zu. Mithilfe der Divider-Klasse können Sie eine horizontale Linie von einem Pixel auf den Bildschirm platzieren.
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(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircleAvatar(
radius: 50.0,
backgroundImage: AssetImage('assets/grumpy_cat.jpg'),
),
Text(
'Grumpy Cat',
style: TextStyle(
fontFamily: 'Pacifico',
fontSize: 40,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Text(
'GUTE LAUNE VERBREITER',
style: TextStyle(
fontFamily: 'Source Sans Pro',
color: Colors.lightBlue.shade100,
fontSize: 20,
letterSpacing: 2.5,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 20,
child: Divider(color: Colors.lightBlue.shade100),
width: 150,
),
Card(
color: Colors.white,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 25),
child: ListTile(
leading: Icon(
Icons.phone_outlined,
color: Colors.lightBlue.shade900,
),
title: Text(
'+41 777 77 77',
style: TextStyle(
color: Colors.lightBlue.shade900,
fontFamily: 'Source Sans Pro',
fontSize: 20,
),
))),
Card(
color: Colors.white,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 25),
child: ListTile(
leading: Icon(
Icons.email_outlined,
color: Colors.lightBlue.shade900,
),
title: Text(
'grumpy@miau.ch',
style: TextStyle(
color: Colors.lightBlue.shade900,
fontFamily: 'Source Sans Pro',
fontSize: 20,
),
)))
],
)),
),
);
}
}
Et voilà unsere fertige Visitenkarten-App:
