Toque em um item da lista

Parte da seção Listas e telas do Journey de Flutter da Coddy. Lição 4 de 33.

Uma lista é mais do que algo para ler: você toca em uma linha para selecioná-la. ListTile tem um onTap:, uma função que é executada quando a linha é tocada, a mesma ideia que o onPressed: de um botão.

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

Um item com um onTap: também mostra um efeito ondulado quando você toca nele, então ele parece um botão.

Quando os itens são criados por um for, o onTap de cada item se lembra do próprio fruit. Tocar em Kiwi executa a função de Kiwi, com fruit definido como 'Kiwi'.

Desafio

Fácil

A barra do aplicativo exibe Pick a fruit. Adicione um onTap: a cada item para que tocar em uma fruta altere a barra do aplicativo para You picked Mango (com a fruta que foi tocada).

Experimente você mesmo

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