Tocca un elemento dell’elenco

Fa parte della sezione Elenchi e schermate del percorso Flutter di Coddy. Lezione 4 di 33.

Un elenco è più di qualcosa da leggere: tocchi una riga per selezionarla. ListTile ha un onTap:, una funzione che viene eseguita quando si tocca la riga, la stessa idea di onPressed: di un pulsante.

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

Un riquadro con un onTap: mostra anche un effetto increspatura quando lo tocchi, così dà la sensazione di un pulsante.

Quando i riquadri vengono creati con un for, l'onTap di ciascun riquadro ricorda il proprio fruit. Toccando Kiwi viene eseguita la funzione di Kiwi, con fruit impostato su 'Kiwi'.

Sfida

Facile

La barra dell'app mostra Pick a fruit. Assegna a ogni riquadro un onTap:, in modo che toccando un frutto la barra dell'app mostri You picked Mango (con il frutto che hai toccato).

Provalo tu

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