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.
Desafio
MédioQuando 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)),
),
],
),
);
}
}
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
1Listas roláveis
Uma lista que rolaItens da listaInício e fimToque em um item da listaDivisórias entre linhas6Abas, Gavetas e Deslizes
Abas com uma barra de navegaçãoÍcones preenchidos para a aba abertaUma gaveta lateralDeslize para excluirDesfaça um deslizePratique por conta própria: Compilador de Flutter online