Scorri per eliminare

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

In un'app di posta o di shopping, elimini un elemento facendolo scorrere fuori dallo schermo. Avvolgi la riga in un Dismissible:

Dismissible(
  key: ValueKey(item),
  onDismissed: (direction) {
    setState(() {
      items.remove(item);
    });
  },
  child: ListTile(title: Text(item)),
)

La riga scivola via sotto il tuo dito. Quando scompare, viene eseguito onDismissed e rimuovi l'elemento dalla lista in setState. Se non lo fai, la lista lo contiene ancora e Flutter si interrompe con un errore: la riga eliminata è ancora nella lista.

key dice a Flutter quale riga è quale, quindi deve essere diversa per ogni riga: ValueKey(item) usa l'elemento stesso.

items è final e puoi comunque rimuovere elementi da essa: final significa che la variabile contiene sempre la stessa lista, non che la lista non cambia mai.

Sfida

Facile

La barra dell'app conta gli elementi. Rendi l'elenco della spesa scorrevole con uno swipe: racchiudi ogni ListTile in un Dismissible con ValueKey(item) come chiave e rimuovi l'elemento da items quando viene eliminato con uno swipe.

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: HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final List<String> items = ['Milk', 'Bread', 'Eggs', 'Apples', 'Cheese'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('${items.length} items')),
      body: ListView(
        children: [
          for (String item in items)
            ListTile(title: Text(item)),
        ],
      ),
    );
  }
}