Menu
CoddyTech

Desfaça um deslize

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

É fácil deslizar sem querer, então bons aplicativos oferecem uma maneira de voltar atrás: uma SnackBar que informa o que foi removido, com um botão Desfazer. Uma SnackBarAction é esse botão:

SnackBar(
  content: Text('$item removed'),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      setState(() {
        items.insert(index, item);
      });
    },
  ),
)

Para colocar o item de volta onde estava, lembre-se da posição dele antes de removê-lo. items.indexOf(item) é a posição dele, items.removeAt(index) o remove, e items.insert(index, item) o coloca de volta nessa mesma posição.

items.add(item) também o traria de volta, mas no final da lista.

challenge icon

Desafio

Médio

Quando um item for deslizado para fora, mostre uma SnackBar dizendo Milk removed (com o nome do item) e uma ação Undo que coloque o item de volta no mesmo lugar.

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: 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)
            Dismissible(
              key: ValueKey(item),
              onDismissed: (direction) {
                setState(() {
                  items.remove(item);
                });
              },
              child: ListTile(title: Text(item)),
            ),
        ],
      ),
    );
  }
}
quiz iconTeste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Todas as lições de Listas e telas

Pratique por conta própria: Compilador de Flutter online