How to change color of Icon after function executes within onTap ( Flutter ListItem)

user_4491880 0
Viewed 10872

Want to change the color of Icon when tapped. By default if item if already favorite, Icon is red while others are of default color.

If user taps on Icon to make it favorite or Unfavorite, I want to change the color after update.

new ListTile(
    trailing: InkWell(
      child: Icon(Icons.share),
    ),
    leading: InkWell(
        onTap: () {
          snapshot.data[index].isFavorite == 0
              ? makeFavorite(snapshot.data[index].id)
              : makeUnfavorite(
              snapshot.data[index].id);
        },
        child: snapshot.data[index].isFavorite == 1
            ? Icon(
          Icons.favorite,
          color: Colors.red,
        )
            : Icon(Icons.favorite)),
    title: new Text(snapshot.data[index].body,
        style: new TextStyle(
            fontWeight: FontWeight.bold, fontSize: 14.0)),
),
flutter
3 Answers

Create an Statefull widget for change it's state

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Title'),
      ),
      body: new ListView.builder(itemBuilder: (context, index) {
        return new ListItem();
      }),
    );
  }

class ListItem extends StatefulWidget {
    @override
    State<StatefulWidget> createState() => new _ItemView();
  }
  class _ItemView extends State<ListItem>{
    bool isFavorite = false;
    @override
    Widget build(BuildContext context) {
      return new ListTile(
        trailing: InkWell(
          child: Icon(Icons.share),
        ),
        leading: InkWell(
            onTap: () {
              isFavorite = !isFavorite;
              setState(() {
              });
            },
            child: isFavorite ? Icon(
              Icons.favorite,
              color: Colors.red,
            ): Icon(Icons.favorite)),
        title: new Text('Your Text',
            style: new TextStyle(
                fontWeight: FontWeight.bold, fontSize: 14.0)),
      );
    }
  }
user_14475950

Solved the problem this way (Updated Code)

Code of List Tile

new ListTile(
                        trailing: InkWell(
                          child: Icon(Icons.share),
                        ),
                        leading: InkWell(
                            onTap: () {
                              snapshot.data[index].isFavorite == 0
                                  ? makeFavorite(
                                      snapshot.data[index].id, index)
                                  : makeUnfavorite(
                                      snapshot.data[index].id, index);
                            },
                            child: (indexes[index] == 1)
                                ? Icon(
                                    Icons.favorite,
                                    color: Colors.red,
                                  )
                                : Icon(Icons.favorite)),
                        title: new Text(snapshot.data[index].body,
                            style: new TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 14.0)),
                      ),

Functions for changing state

 makeFavorite(int id, int index) {
    // operations to be performed
    // end of operations to be performed
    setState(() {
      indexes[index] = 1;
    });
  }
user_44918800

use setState inside onTap function and assign color there.

user_40367030
Related