Ein guter Startpunkt für alle, die Flutter lernen wollen, ist es, eine Liste in einer Flutter App anzulegen und mit Assets, in diesem Fall Bildern. Listen bilden das Kernstück vieler Apps, ob es nun das Inventar eines Shops ist oder eine einfache To-Do-Liste. Hier zeige ich dir wie du eine Liste in Flutter erstellen und bearbeiten kannst. In diesem Fall machen wir eine Blumenliste mit Beschreibungstext und Bild.
Tipp: Lege dir schon einmal ein paar Bilder zurecht, die du für diese Übung verwenden möchtest.
Listen-Klasse erstellen
Es erscheint kontraintuitiv, aber bevor wir die Liste bauen, erstellen wir zuerst deren Inhalt. Für eine bessere Übersicht, ziehen wir den Inhalt in eine eigene Datei heraus. Gehe dazu in deine lib und erstelle dort eine neue Dart-Datei, zum Beispiel flower.dart. Erstelle dann eine Flower-Klasse. Diese soll einen Bildnamen und ein Bild zurückgeben.
class Flower {
String label;
String imageUrl;
// TODO: Add servings and ingredients here
Flower(
this.label,
this.imageUrl,
);
}
Liste mit Daten füllen
Um es an dieser Stelle einfacher zu machen, schreiben wir die Daten direkt in die App herein. Hinterlege zuerst in deinem Assets-Ordner die Bilder, die du anzeigen möchtest.
Wie man Assets in eine Flutter-App einfügt, erfährst du in diesem Artikel: Assets einfügen.
Wenn das erledigt ist, füge die folgende Methode ein und hinterlege dort deine Dateien.
class Flower {
String label;
String imageUrl;
Flower(
this.label,
this.imageUrl,
);
static List<Flower> samples = [
Flower(
'Bartblume',
'assets/bartblume.png',
),
Flower(
'Ringelblume',
'assets/ringelblume.png',
),
Flower(
'Narzisse',
'assets/narzisse.png',
),
];
}
Die Liste anzeigen
Gehe nun zurück in deine main.dart und importiere die Liste.
import 'package:flutter/material.dart';
import 'flower.dart';Gehe jetzt in den body und füge den ListView.builder in einer child-Komponente ein.
body: Center(
child: ListView.builder(
itemCount: Flower.samples.length,
itemBuilder: (BuildContext context, int index) {
return Text(Flower.samples[index].label);
},
),
),
Jetzt wird dir deine Liste immerhin schon angezeigt. Aber schön ist es nicht. Damit die Liste hübsch aussieht, lass sie uns in eine Card packen.
Liste in einer Card anzeigen
Eine Card kann man ganz einfach mit dem Card-Widget erstellen. Gehe zuerst in deinen itemBuilder und ersetze return Text() durch
return buildFlowerCard(Flower.samples[index]);
Denn du willst ja, dass die Card angezeigt wird und nicht nur der Text. Jetzt erstellst du unter deinem build-Widget ein buildFlowerCard-Widget.
Widget buildFlowerCard(Flower flower) {
// 1
return Card(
// 2
child: Column(
// 3
children: <Widget>[
// 4
Image(image: AssetImage(flower.imageUrl)),
// 5
Text(flower.label),
],
),
);
}
Und voilà! Die Card wäre jetzt fertig!
Aber schöner geht immer. Ich habe noch ein paar Styles hinzugefügt und jetzt sehen Code und App so aus:
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ListView.builder(
itemCount: Flower.samples.length,
itemBuilder: (BuildContext context, int index) {
return buildFlowerCard(Flower.samples[index]);
},
),
),
);
}
Widget buildFlowerCard(Flower flower) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Card(
elevation: 2.0,
color: Colors.pink[50],
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: Image(
image: AssetImage(flower.imageUrl),
),
),
Text(
flower.label,
style: const TextStyle(
fontSize: 25.0,
color: Colors.pink,
fontWeight: FontWeight.bold,
fontFamily: 'Palatino',
),
),
],
),
),
),
);
}
Die nächsten Schritte
Die erste Hürde ist genommen. Wie geht es nun weiter? Probiere es doch mit diesen Artikeln für Flutter Anfänger: