Appuyer sur un élément de liste

Fait partie de la section Listes et écrans du Journey Flutter de Coddy. Leçon 4 sur 33.

Une liste est plus qu’un élément à lire : tu touches une ligne pour la sélectionner. ListTile possède un onTap:, une fonction qui s’exécute lorsque tu touches la ligne, selon le même principe que le onPressed: d’un bouton.

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

Une tuile avec un onTap: affiche aussi une ondulation lorsque tu la touches, ce qui lui donne la sensation d’un bouton.

Lorsque les tuiles sont créées par un for, le onTap de chaque tuile mémorise son propre fruit. Toucher Kiwi exécute la fonction de Kiwi, avec fruit défini sur 'Kiwi'.

Défi

Facile

La barre d’application affiche Pick a fruit. Ajoute un onTap: à chaque tuile afin qu’appuyer sur un fruit change la barre d’application en You picked Mango (avec le fruit sur lequel tu as appuyé).

Essayez vous-même

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),
            ),
        ],
      ),
    );
  }
}