Iconbutton color doesn't change:

Question

i need help. When I press Iconbutton the document is added (or deleted from) to Firestore , but the color of the Iconbutton doesn't change.

class DisplaydataScreen extends StatefulWidget {
  const DisplaydataScreen({Key key}) : super(key: key);

  @override
  _DisplaydataScreenState createState() => _DisplaydataScreenState();
}

class _DisplaydataScreenState extends State<DisplaydataScreen> {
  String userID = "";
  var Data;

  Icon favicon = Icon(
    LineIcons.heart,
    size: 20,
  );

  @override
  void initState() {
    super.initState();
    fetchUserInfo();
  }

  fetchUserInfo() {
    User getUser = FirebaseAuth.instance.currentUser;
    userID = getUser.uid;
    print(userID);
  }

  Future<List<Tweet>> getTweetFromJSON(
      BuildContext context, String topic) async {
    String jsonString =
        await DefaultAssetBundle.of(context).loadString('tweets.json');
    List<dynamic> raw = jsonDecode(jsonString);
    return raw.map((e) => Tweet.fromJSon(e)).toList();
  }

  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context).settings.arguments;

    return Scaffold(
      body: Container(
        child: FutureBuilder(
          future: getTweetFromJSON(context, args),
          builder: (context, data) {
            List<Tweet> posts = data.data;
            return ListView.builder(
              itemCount: posts.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(
                    posts[index].name,
                    style:
                        TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold),
                  ),
                  subtitle: Text(posts[index].tweet),
                  // IconButton
                  trailing: IconButton(
                    onPressed: () async {
                      final userDocRef = favorite.doc(
                        posts[index].name,
                      );
                      final doc = await userDocRef.get();
                      if (!doc.exists) {
                        setState(() {
                          favicon = Icon(LineIcons.heart,
                              color: Colors.white, size: 20);
                        });
                        addfavorite(
                          posts[index].name,
                          posts[index].photos,
                        );
                      } else {
                        setState(() {
                          favicon = Icon(LineIcons.heart,
                              color: Colors.red, size: 20);
                        });
                        deletefavorite(posts[index].name);
                      }
                    },
                    icon: favicon,
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }

This is the add and delete methode:

  final CollectionReference favorite =
      FirebaseFirestore.instance.collection('favorite');

  Future<void> addfavorite(String name, List photos) async {
    return await favorite.doc(name).set({

      'name': name,
      'photos': photos,

    });
  }

  Future<void> deletefavorite( name) async {
    await favorite.doc(name).delete();
  }

This is a Screenshot of my project, what i want is that the iconbutton remain colored as long as they are favorites after being pressed

Answer 1

This should work:

import 'package:flutter/material.dart';

class DisplaydataScreen extends StatefulWidget {
  const DisplaydataScreen({Key key}) : super(key: key);

  @override
  _DisplaydataScreenState createState() => _DisplaydataScreenState();
}

class _DisplaydataScreenState extends State<DisplaydataScreen> {
  String userID = "";
  var Data;

  @override
  void initState() {
    super.initState();
    fetchUserInfo();
  }

  fetchUserInfo() {
    User getUser = FirebaseAuth.instance.currentUser;
    userID = getUser.uid;
    print(userID);
  }

  Future<List<Tweet>> getTweetFromJSON(BuildContext context,
      String topic) async {
    String jsonString =
    await DefaultAssetBundle.of(context).loadString('tweets.json');
    List<dynamic> raw = jsonDecode(jsonString);
    return raw.map((e) => Tweet.fromJSon(e)).toList();
  }

  @override
  Widget build(BuildContext context) {
    final args = ModalRoute
        .of(context)
        .settings
        .arguments;

    return Scaffold(
      body: Container(
        child: FutureBuilder(
          future: getTweetFromJSON(context, args),
          builder: (context, data) {
            List<Tweet> posts = data.data;
            return ListView.builder(
              itemCount: posts.length,
              itemBuilder: (context, index) {
                return FavoriteListTileItem(post: posts[index],);
              },
            );
          },
        ),
      ),
    );
  }
}

class FavoriteListTileItem extends StatefulWidget {
  final Tweet post;
  const FavoriteListTileItem({Key? key, this.post}) : super(key: key);

  @override
  State<FavoriteListTileItem> createState() => _FavoriteListTileItemState();
}

class _FavoriteListTileItemState extends State<FavoriteListTileItem> {

  Icon favicon = Icon(
    LineIcons.heart,
    size: 20,
  );

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(
        widget.post.name,
        style:
        TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold),
      ),
      subtitle: Text(widget.post.tweet),
      // IconButton
      trailing: IconButton(
        onPressed: () async {
          final userDocRef = favorite.doc(
            widget.post.name,
          );
          final doc = await userDocRef.get();
          if (!doc.exists) {
            setState(() {
              favicon = Icon(LineIcons.heart,
                  color: Colors.white, size: 20);
            });
            addfavorite(
              widget.post.name,
              widget.post.photos,
            );
          } else {
            setState(() {
              favicon = Icon(LineIcons.heart,
                  color: Colors.red, size: 20);
            });
            deletefavorite(widget.post.name);
          }
        },
        icon: favicon,
      ),
    );
  }
}