Ein Listenelement antippen

Teil des Abschnitts Listen und Bildschirme der Flutter-Journey von Coddy. Lektion 4 von 33.

Eine Liste ist mehr als etwas zum Lesen: Du tippst auf eine Zeile, um sie auszuwählen. ListTile hat ein onTap:, eine Funktion, die ausgeführt wird, wenn auf die Zeile getippt wird – dieselbe Idee wie bei onPressed: einer Schaltfläche.

ListTile(
  title: Text(fruit),
  onTap: () {
    setState(() {
      picked = fruit;
    });
  },
)

Ein Listeneintrag mit einem onTap: zeigt beim Berühren auch einen Welleneffekt an und fühlt sich dadurch wie eine Schaltfläche an.

Wenn die Listeneinträge mit einer for-Schleife erstellt werden, merkt sich das onTap jedes Eintrags sein eigenes fruit. Wenn du auf Kiwi tippst, wird Kiwis Funktion ausgeführt, wobei fruit auf 'Kiwi' gesetzt ist.

Aufgabe

Einfach

In der App-Leiste steht Pick a fruit. Gib jeder Kachel ein onTap:, sodass beim Antippen einer Frucht die App-Leiste zu You picked Mango wechselt (mit der Frucht, die angetippt wurde).

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 const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FruitPicker(),
    );
  }
}

class FruitPicker extends StatefulWidget {
  const FruitPicker({super.key});

  @override
  State<FruitPicker> createState() => _FruitPickerState();
}

class _FruitPickerState extends State<FruitPicker> {
  final List<String> fruits = ['Apple', 'Banana', 'Kiwi', 'Mango', 'Peach'];
  String picked = 'Pick a fruit';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(picked)),
      body: ListView(
        children: [
          for (String fruit in fruits)
            ListTile(
              title: Text(fruit),
            ),
        ],
      ),
    );
  }
}