Flutter - Icon and text in Bottomsheet not updating the UI properly

Question

I have a list of items that I am grabbing from a local database like this and displaying them in a list, when an item is clicked a bottom sheet appears where the user can add or remove said item from favorites list, the feature works flawlessly except the UI part with the icon and text doesn't change state (supposed to go from border_favorite and 'add to favorites' to filled_favorite and 'remove from favorites' and vice versa) even when using setState() the icon/text stay the same they only change when I close down the bottom sheet and reopen it again.

Q: What is causing this behaviour ? and how can I possibly fix this bug?

This is the bottom sheet's code:

//isBookmarked here is a field in the DB that I get elsewhere in the database
//that variable is working just fine the console log reports show that everything is in its place
//the problem is that the icon and title of the ListTile widget are not updating as they should
void trriggerBottomsheet(context, Word wrd) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext buildCtx) {
            return Container(
                child: Wrap(
                    children: <Widget>[ 
                        ListTile(
                            onTap: () {
                                isBookmarked == true
                                  ? databaseHelper.removeFromFavorite(wrd.wordId)
                                  : databaseHelper.addToFavorite(wrd.wordId);
                                setState(() {isBookmarked = !isBookmarked;});
                            },
                            leading: isBookmarked == true
                              ? Icon(Icons.favorite, color: Colors.red[300],)
                              : Icon(Icons.favorite_border),
                            title: isBookmarked == true
                              ? Text('remove from favorites')
                              : Text('add to favorites'),
                        ), 
                    ],
                ),
            );
        }
    );
}

Answer 1

You can use StateSetter with StatefulBuilder when show bottomsheet.

void trriggerBottomsheet(context, Word wrd){
    showModalBottomSheet(){
       context: context,
       builder: (context){
          return StatefulBuilder(
             builder: (BuildContext ctx, StateSetter stateSetter){
                return Container(
                    child: Wrap(
                        children: <Widget>[ 
                            ListTile(
                                onTap: () {
                                    isBookmarked == true
                                      ? databaseHelper.removeFromFavorite(wrd.wordId)
                                      : databaseHelper.addToFavorite(wrd.wordId);
                                    stateSetter(() {
                                      isBookmarked = !isBookmarked;
                                    })
                                    setState(() {
                                      setState(() {
                                        isBookmarked = !isBookmarked;
                                      });
                                      isBookmarked = !isBookmarked;
                                    });
                                },
                                leading: isBookmarked == true
                                  ? Icon(Icons.favorite, color: Colors.red[300],)
                                  : Icon(Icons.favorite_border),
                                title: isBookmarked == true
                                  ? Text('remove from favorites')
                                  : Text('add to favorites'),
                            ), 
                        ],
                    ),
                );
             }
          );
       }
    }
}