Working with Dismissible Widget in Flutter

Photo by Charles Deluvio on Unsplash

in some cases, we need to swipe the item to delete, For example, when writing an email app, you might want to allow a user to swipe away email messages to delete them from a list, in this example for our application.

dismissible example

how the application will we make?

The application that we will make consists of several basic foundations, for example like this:

• Creating Base Structure of projects
• Creating a List of item
• Creating Fake Data for Testing Using faker
• Wrap item with Dismissible Widget

now let’s get started

Creating Base Structure of Project

in this section, we create a new flutter project with this structure

basic project structure

to create a new flutter project you can use the following command

flutter create dismissible

the command follows a format like this

flutter create <project_name>

separate MaterialApp and Scaffold like this

separate class

Creating List of Item

to create a list of items we can use ListView.builder like this

creating lists of item

Creating Fake Data Using Faker

to reduce the development process we can use fake data, to generate we can use a flutter plugin called faker, installing faker with this command

flutter pub add faker

Wrap List with Dismissible Widget

In this step, give users the ability to swipe an item off the list by using the Dismissible widget.

After the user has swiped away the item, remove the item from the list and display a snack bar. In a real app, you might need to perform more complex logic, such as removing the item from a web service or database. don’t forget to use faker :)

Update the itemBuilder() function to return a Dismissible widget:

now you see the result

Conclusion

This is one of the simplest implementations of dismissible widgets, hope it’s helpful, and good luck, source code is available on Github,