flutterfirebaseiconbutton

Iconbutton color doesn't change:


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


Solution

  • 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,
          ),
        );
      }
    }