Article Image

Create a favorite selection in ListView using Flutter

26th November 2019

Hi guys!

In this post, I'm going to show you how to create a favorite section. Something like this:

We will need to add the next dependency in pubspec.yaml:

english_words: ^3.1.5

On this occasion, we are going to use english_words the package because is very useful for this example, but you can use this code in different ways.

Let's code!

At first, we are going to declare variables which will be nouns, and then we are going to take 40 elements.

Wait ... nouns.take(40) returns a list ... why do I add .toList() ?.

Well ... Marge, I'm not gonna lie to you.

I'm just kidding!

We need a List<String> type, but nouns.take(40) returns a Iterable<String> object type. So, we must convert Iterable<String> which is a lazy list to List<String> using .toList() function.

Now, we can use ListView widget in order to show nouns:

But ... it doesn't look very good, right?

Maybe, we can use ListView.separated() widget:

And it looks like:

Well ... is similar but it has a Divider(). We can make it pretty simply by wrapping Text() the widget with a ListTile() widget, like:

And it looks like:

Good, it's getting better!

ListTile widget is a perfect widget to show information on a list. ListTile has many properties to customize it, for example:

ListTile has 3 important properties: Leading, Title and Trailing. An icon aligned to left, a text title, and another icon aligned to right. We are going to use Title and Trailing for our favorite section.

And it looks like:

It's beautiful ... but it is not functional ... it's do nothing.

ListView has a property called onTap() which you can use to add functionality. We are going to paint the red favorite icon when ListTile is tapped. For that, we need to save which words are tapped.

So, we create a variable that will save words:

And just before Flutter draws our ListTile(), we need to know if the word is contained on our savedWords. If it is contained we are going to set a specific Icon, if not we are going to set another specific Icon.

NOTE: in order to follow good development practices, I recommended creating a function to build this functionality.

It looks like this:

Well ... if you execute this code ... will do nothing. Why?. When the user taps ListTile() then onTap() the function is executed. This function adds a word to savedWords the variable and then when Flutter rebuilds UI it should look like a favorite icon.

We forget setState() function. This function tells Flutter to rebuild widgets with the different states in compare to the previous state. If we add it, we can show our favorite words.

Great, we can check words but ... we can't uncheck words. So, we have to remove words if it's contained.

And it looks like:

In a future post, we are going to see how to show our favorite words on another screen.

The full code is available on GitHub.

If you want, you can read my previous Flutter articles!

That's all folks!

Enjoy!

More Than Code LLC

Address: 8 The Green STE B, Dover, DE 19901

Contact: mtc.morethancode@gmail.com

© Copyright 2022 All right reserved to More Than Code LLC