How to make a Dismissible List View in Flutter - folio3
blog-page-header-bg

How to make a Dismissible List View in Flutter

COMMENTS (0)
Tweet

In this blog, we’ll look at how we can build a dismissable list view in Flutter. You can think of dismissible widget as a draggable piece UI of that can be dragged in any direction and the action causes the UI to slide out from the view. Here is an example of how it looks and what we are going to build:

The complete code for this project is available on the GitHub repo here. Feel free to fork & use it.

Now, Let’s start building that together.

Create a Flutter Project

First things first, create a Flutter project:

Build Movie Model

In the lib directory of your project, create a new folder with the name modelsadd a new file movie.dart with the following code:

Generate Movie Data

Now we’ll create some static movie data to create our ListView. Obviously, this kind of data might come from an API most of the time. Here just for simplicity, I created an array of movies using hard-coded data (which is real and taken from IMBD).

Create new folder, data in the lib directory of your project. Now add a file with the name movie-list.dart and write the following code:

Important: Your package name can differ from mine based on the name of the project you decided.

We now have a source of data. All we need to do is to build our list. For this, we’ll start with the movie card first.

Build MovieCard UI

Create widgets folder in the lib directory and add file movie-card.dart with the following code:

Note: Although we are not fetching data from anywhere outside the app, however, the images are being fetched through URL for which we are using NetworkImage API of Flutter which loads the image asynchronously.

Build MovieList Page

Now create one more folder pages in the lib directory. Create new file movies.dart and paste the following code:

Take a closer look at the ListView.builder code we used above:

First, we are providing the itemCount with the length of the movies array. Next, the itemBuilder builds and returns the dismissible list item by receiving the context and the index of the item to be built.

The Dismissible Widget

In the itemBuilder method, we are using Flutter’s Dismissible widget. It receives a method under onDismissed along with the DismissDirectionSupported DismissDirections are:

  • endToStart( from right to left)
  • startToEnd (from left to right)
  • horizontal (both from right to left and left to right)
  • up
  • down
  • vertical (both up and down)

In our case, we are only using one direction which is from right to left (endToStart in the code). We are removing that item from the list and performing this action inside the setState() method. Removing the item from the movies list changes the state, so we have to perform this action inside the setState() method. This method under the hood calls the build method to reflect the changes on the UI.

The child receives the actual MovieCard with the movie item to build. Also, a unique key is assigned to the dismissible to avoid duplicates.

We have done almost everything. All we need to do is to call this movies page as soon as the application starts. For this, edit your main.dart file to look like this:

We are all set to launch the app and see how it looks. Run this app on your emulator or any real device to see how it looks.

Conclusion

Using a dismissible widget is very simple and straightforward. You can dismiss it in any direction(horizontal or vertical) and attach events to perform any operations against the event. You can wrap any widget inside Dismissible widget that you can logically think off. Here’s the link to the Flutter’s documentation for Dismissible Widget.

I’ll come with some more exciting stuff on Flutter soon. Till then, Enjoy development with Flutter :)

CALL

USA408 365 4638

VISIT

1301 Shoreway Road, Suite 160,

Belmont, CA 94002

Latest From Our Blog

How to make a Dismissible List View in Flutter

June 3, 2019
In this blog, we’ll look at how we can build a dismissable list view in Flutter. You can think of dismissible widget as a draggable piece UI of tha...
Read more

Deploying NodeJs (ExpressJs) project with Docke...

May 20, 2019
Prerequisites: Nodejs understanding, Kubernetes/Docker Architecture Theory We are going to learn how to: Deploy an expressjs app (docker image) to ...
Read more

How to Manage Multiple Environments in a React ...

May 16, 2019
This is a step by step guide for React Native Developers to understand how to manage multiple environments in a React Native App for Android. Envir...
Read more