Toca un elemento de lista

Parte de la sección Listas y pantallas del Journey de Flutter de Coddy. Lección 4 de 33.

Una lista es más que algo para leer: tocas una fila para seleccionarla. ListTile tiene un onTap:, una función que se ejecuta cuando se toca la fila, la misma idea que el onPressed: de un botón.

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

Un mosaico con un onTap: también muestra una onda al tocarlo, así que se siente como un botón.

Cuando los mosaicos se crean con un for, el onTap de cada mosaico recuerda su propio fruit. Al tocar Kiwi, se ejecuta la función de Kiwi, con fruit establecido en 'Kiwi'.

Desafío

Fácil

La barra de la aplicación dice Pick a fruit. Asigna a cada elemento onTap: para que, al tocar una fruta, la barra de la aplicación cambie a You picked Mango (con la fruta que se tocó).

Pruébalo tú mismo

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