Utilizamos la función Deslizar para descartar en muchas aplicaciones móviles. En este artículo, crearemos una lista de elementos e implementaremos un deslizamiento para descartarlos. Cuando queremos descartar el contenido usando deslizar, podemos hacerlo con la ayuda de deslizar para descartar el widget en un aleteo. En general, usamos esto cuando tenemos una lista de elementos y cuando queremos eliminar una tarea, simplemente la descartamos deslizando el dedo hacia la izquierda o hacia la derecha. En este artículo, hemos creado una lista de elementos utilizando ListView.builder. Cuando se descarte un elemento, se mostrará Snackbar mostrando el mensaje «Elemento descartado con éxito».
Siga los pasos a continuación para implementar deslizar para descartar:
Paso 1: Cree una nueva aplicación flutter.
flutter create <YOUR_APP_NAME>
Paso 2: elimine el código predeterminado del archivo main.dart.
Paso 3: cree una lista de elementos como se muestra a continuación en el archivo main.dart .
Paso 4: use el siguiente código en el archivo main.dart :
Dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is
//the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Swipe to dismiss',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: new MyPage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyPage extends StatelessWidget {
final List<String> items =
new List<String>.generate(80, (i) => "Item ${i + 1}");
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.lightBlue[50],
appBar: new AppBar(
title: new Text("Swipe to dismiss"),
backgroundColor: Colors.green,
actions: <Widget>[
Text("GFG", textScaleFactor: 3),
],
),
body: new ListView.builder(
itemCount: items.length,
itemBuilder: (context, int index) {
return new Dismissible(
key: new Key(items[index]),
onDismissed: (direction) {
items.removeAt(index);
Scaffold.of(context).showSnackBar(
new SnackBar(content: new Text("Item dismissed successfully")));
},
background: new Container(
color: Colors.red,
),
child: Container(
child: new ListTile(
leading: Icon(Icons.list),
title: new Text("GFG " + "${items[index]}"),
trailing: Icon(Icons.done_all,color: Colors.green,),
),
),
);
},
),
);
}
}
Explicación:
- Crear una lista de elementos .
- Construir Desechable usando itemBuilder .
- Realice operaciones onDismissed en los elementos de la lista.
Producción:
Cuando construimos una lista de elementos, resultará:
Cuando se desliza cualquier elemento de la lista, se elimina y cuando el elemento se descarta de la lista, se mostrará un Snackbar con el mensaje «Elemento descartado con éxito» como se muestra a continuación:
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA