Flutter, How do I add favorites inside a ListView.builder

Question

I'm trying to allow a user to mark a post being built by a ListView.builder as a like . With my current code, when a user like one post, all posts are marked as favorite. I would like the user to be able to add each post individually as a like and persist that favorite after a restart. I have the data saved to an api but it seems like this should be handled in the app itself.

Here is my code:

bool isFavourite = false;
ListView.builder(
          itemCount: serviceProvider.justPostsModel.length,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.only(left: 4.0, right: 4.0, bottom: 4),
              child: InkWell(
                onTap: ()  {
                },
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  child: Card(
                    child: Column(
                        children: [
                          Padding(
                            padding:
                                const EdgeInsets.only(left: 8.0, right: 12),
                            child: Row(
                              children: [
                                InkWell(
                                  onTap: () async {
                                    if (isFavourite == false) {
                                      await serviceProvider.setToggleLike(
                                          context,
                                          serviceProvider
                                              .justPostsModel[index].id);
                                      await serviceProvider
                                          .getPostsList(context);
                                      setState(() {
                                        isFavourite = true;
                                      });
                                    } else {
                                      await serviceProvider.setToggleLike(
                                          context,
                                          serviceProvider
                                              .justPostsModel[index].id);
                                      await serviceProvider
                                          .getPostsList(context);
                                      setState(() {
                                        isFavourite = false;
                                      });
                                    }
                                  },
                                  child: Icon(
                                    isFavourite == false
                                        ? Icons.favorite_border
                                        : Icons.favorite,
                                    color: Constants.skyColor(),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ]),
                  ),
                ),
              ),
            );
          },
        ),

So , how can i do that in best way !

Solution

You should have a list that contains favoriteStatus.

//length should be equal serviceProvider.justPostsModel.length
//put some initial value (true, false) in each index according to its favorite status
List<bool> isFavourite;

then

ListView.builder(
          itemCount: serviceProvider.justPostsModel.length,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.only(left: 4.0, right: 4.0, bottom: 4),
              child: InkWell(
                onTap: ()  {
                },
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  child: Card(
                    child: Column(
                        children: [
                          Padding(
                            padding:
                                const EdgeInsets.only(left: 8.0, right: 12),
                            child: Row(
                              children: [
                                InkWell(
                                  onTap: () async {
                                    if (isFavourite[index] == false) {
                                      await serviceProvider.setToggleLike(
                                          context,
                                          serviceProvider
                                              .justPostsModel[index].id);
                                      await serviceProvider
                                          .getPostsList(context);
                                      setState(() {
                                        isFavourite[index] = true;
                                      });
                                    } else {
                                      await serviceProvider.setToggleLike(
                                          context,
                                          serviceProvider
                                              .justPostsModel[index].id);
                                      await serviceProvider
                                          .getPostsList(context);
                                      setState(() {
                                        isFavourite[index] = false;
                                      });
                                    }
                                  },
                                  child: Icon(
                                    isFavourite[index] == false
                                        ? Icons.favorite_border
                                        : Icons.favorite,
                                    color: Constants.skyColor(),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ]),
                  ),
                ),
              ),
            );
          },
        ),

Comments

[Mariam Younes]

it has that but in my case the counter of like increase in post what i want but the icon change in the all of list

[Franciszek Job]

Because you apply isFavourite to all posts. You have one variable to check it.

[Mariam Younes]

please , can you explain how to do that , kindly !

[Mariam Younes]

when i trying it .. this error is appear The method '[]' was called on null. Receiver: null Tried calling: [](0)

[Shanto]

i think you have not put any value inside isFavorite list. you have to put n number of bool value inside it.

[Shanto]

if your list has 5 elements then you need to push [false, false, false, false, false] like this initially

[Mariam Younes]

you are right , the last thing : when i close the app and restart it the value on the isFavourite[index] return to false ( it's not save the last bool value) do you know how i can save the last value in every time i opened the app

[Shanto]

are you getting the data from cloud or from your local database? you need to update the favorite status from where you are getting the data.