How to Make Slide and Delete Item List in Flutter App
Introduction
Flutter is a popular framework for building natively compiled applications for mobile, web, and desktop from a single codebase. One of the common requirements in a Flutter app is to create a list of items that can be swiped to delete. In this article, we will explore how to make a slide and delete item list in a Flutter app.
Creating the List View
To create a list view in Flutter, we can use the `ListView` widget. However, to make the list items swipeable, we need to use the `Dismissible` widget. The `Dismissible` widget provides a swipe gesture to remove items from a list.
Implementing the Dismissible Widget
To implement the `Dismissible` widget, we need to provide a `key` property and a `onDismissed` callback. The `key` property is used to identify the item to be dismissed, and the `onDismissed` callback is called when the item is dismissed.
“`dart
import ‘package:flutter/material.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
MyHomePageState createState() => MyHomePageState();
}
class _MyHomePageState extends State
List
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Slide and Delete Item List’),
),
body: ListView.builder(
itemCount: _items.length,
itemBuilder: (context, index) {
return Dismissible(
key: Key(_items[index]),
onDismissed: (direction) {
setState(() {
_items.removeAt(index);
});
},
child: ListTile(
title: Text(_items[index]),
),
);
},
),
);
}
}
“`
Customizing the Dismissible Widget
We can customize the `Dismissible` widget by providing a `background` property. The `background` property is used to specify the widget that is displayed behind the child when it is being dismissed.
“`dart
Dismissible(
key: Key(_items[index]),
onDismissed: (direction) {
setState(() {
_items.removeAt(index);
});
},
background: Container(
color: Colors.red,
alignment: Alignment.centerRight,
padding: EdgeInsets.only(right: 20.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
child: ListTile(
title: Text(_items[index]),
),
)
“`
Conclusion
In this article, we have explored how to make a slide and delete item list in a Flutter app. We have used the `Dismissible` widget to provide a swipe gesture to remove items from a list. We have also customized the `Dismissible` widget by providing a `background` property.
FAQ
1. What is the purpose of the `key` property in the `Dismissible` widget?
The `key` property is used to identify the item to be dismissed.
2. What is the `onDismissed` callback in the `Dismissible` widget?
The `onDismissed` callback is called when the item is dismissed.
3. How to customize the `Dismissible` widget?
We can customize the `Dismissible` widget by providing a `background` property.
4. What is the use of `ListView.builder` in the code?
`ListView.builder` is used to build the list of items.
5. How to remove an item from the list when it is dismissed?
We can remove an item from the list by using the `removeAt` method in the `onDismissed` callback.
