Create a favorite selection in ListView using Flutter

4 min readJul 29, 2020

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

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.

List<String> words = nouns.take(40).toList();

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:

https://api.flutter.dev/flutter/material/ListTile-class.html

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:

Set<String> savedWords = Set<String>();

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 different states in comparison to the previous state. If we add it, we can show our favorite words.