如何在 onPress 颤动之前根据条件更改 listView 负载上 IconButton 的颜色？

Question

我有 ListView 个 post 并且在每一行中都有 IconButton 或 post。现在用户可以喜欢任何 post。我需要检查用户是否喜欢 post 并且 post 之类的 IconButton 将是蓝色的。用户不喜欢的 post，IconButton 颜色为灰色。我需要在加载 post 的列表时检查它。

列表：

    children: <Widget> [
        Row(
           children: <Widget>[
           new IconButton(
           icon: new Icon(Icons.thumb_up),

           // documentId = list[index].id;
           // want to get documentId in this way from here and pass this documentId to the method like  checkPostLikedOrNot(documentId); 
           //  checkFeedLikedOrNot(documentId ); 
           // want to call this method here and check the conditon    
           
          color:(isPressed) ? Color(0xff007397) : Color(0xff9A9A9A),
           onPressed: (){
             print(widget.userId); // userId
             documentId = list[index].id;
             _counter = list[index].data()["like_count"];
             _incrementCounter(); // updating table with userId in this method
              },
            ),
          ],
        ),
      ],

检查方法：

    checkFeedLikedOrNot(documentId) async{
      DocumentReference docRef = FirebaseFirestore.instance.collection('post').doc(documentId);
      DocumentSnapshot docSnapshot = await docRef.get();
      List likedUser = docSnapshot.data()['liked_user_id'];
      if(likedUser.contains(widget.userId) == true){
         print('user already exist=='+ widget.userId);
         //color will be blue
      }else{
         //color will be grey
    }
  }

建筑ListView

return ListView.builder(
                  shrinkWrap: true,
                  primary: false,
                  itemCount: list.length,
                  itemBuilder:(context, index)  {
                    print(index);
                    return Card(
                      elevation: 5,
                      shape: Border(bottom: BorderSide(color: Colors.lightBlue, width: 5)),
                        child: Column(
                            children: <Widget> [
                              ListTile(

我该怎么做？

Answer 1

关于提高安全性的注意事项：您的 API 应该有一种方法来检查用户是否喜欢 userId 和 postId 的 post（或者让所有人都喜欢 posts' 给定 userId 的 ID，带分页）。这不是让所有喜欢 post.

的用户的好方法

您可以使用 FutureBuilder.

检查方法应该returnFuture<bool>

   Future<bool> checkFeedLikedOrNot(documentId) async {
      DocumentReference docRef = FirebaseFirestore.instance.collection('post').doc(documentId);
      DocumentSnapshot docSnapshot = await docRef.get();
      List likedUser = docSnapshot.data()['liked_user_id'];
      return likedUser.contains(widget.userId);
  }

然后可以用FutureBuilder得到Icon

  Widget getIcon(documentId) {
    return FutureBuilder<bool>(
      builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
        Color color = Colors.grey; // set proper default color
        if (snapshot != null && snapshot.connectionState == ConnectionState.done &&
            snapshot.hasData != null) {
          color = Colors.blue; // set proper "liked" color
        }
        return Icon(
            Icons.thumb_up,
            color: color,
          );
      },
      future: checkFeedLikedOrNot(documentId),
    );
  }

并在IconButton

中使用此方法

new IconButton(
           icon: getIcon(list[index].id),

           // documentId = list[index].id;
           // want to get documentId in this way from here and pass this documentId to the method like  checkPostLikedOrNot(documentId); 
           // checkFeedLikedOrNot(documentId ); 
           // want to call this method here and check the conditon    
           
          color:(isPressed) ? Color(0xff007397) : Color(0xff9A9A9A),
           onPressed: (){
             print(widget.userId); // userId
             documentId = list[index].id;
             _counter = list[index].data()["like_count"];
             _incrementCounter(); // updating table with userId in this method
              },
            ),

如何在 onPress 颤动之前根据条件更改 listView 负载上 IconButton 的颜色？

how to change color of IconButton on listView load based on a conditon, before onPress flutter?

icons

listview

colors

flutter