The Swipe to dismiss feature is used by us in many mobile apps. In this article, we will create a list of items and implement a swipe to dismiss in it. When we want to dismiss the content using swipe then we can do this with the help of swipe to dismiss widget in a flutter. Generally, we use this when we have a list of items and when we want to delete a task then we simply dismiss it using left swipe or right swipe. In this article, we have created a list of items using ListView.builder. When an item is dismissed then Snackbar will be displayed showing a message “Item dismissed successfully”.
Follow the below steps to implement swipe to dismiss:
Step 1: Create a new flutter application.
flutter create <YOUR_APP_NAME>
Step 2: Delete the default code from the main.dart file.
Step 3: Create a list of items as shown below in main.dart file.
Step 4: Use the below code in the main.dart file :
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,),
),
),
);
},
),
);
}
} |
Explanation:
- Create a list of items.
- Build Dismissible using itemBuilder.
- Perform onDismissed operations on list items.
Output:
When we build a list of items, it will result:
When any list item is swiped it gets deleted and when the item is dismissed from the list, a Snackbar with the message “Item dismissed successfully” will be shown as below: