I'd like to add a like button to this flutter blog app

Question

This project can be found here:https://github.com/Santos-Enoque/flutter_blog_app

So far I have this connected to firebase realtime database and it works well. I'm trying to add a like button to the Home page(lib/screens/home.dart) where all the posts are listed.

The Homepage displays the blog results using a Card with a ListTile. The trailing property of the ListTile card is already used so I'd like to use the leading property of the ListTile card to display a favourite icon which would increment a counter++ when tapped and also save the results to Firebase. Just like Facebook's like button. Here's the code below:

                          child: Card(
                            child: ListTile(
                              title: ListTile(
                                onTap: (){
                                  _incrementCounter();                                
                                },

                                leading: FittedBox(
                                  fit: BoxFit.fitWidth,
                                  child: Row(
                                    children: <Widget>[
                                      Icon(Icons.favorite),
                                      Text(postsList[index].counter.toString()
                                      ),
                                    ],
                                  ),
                                  ),

                                title: Text(
                                  postsList[index].title,
                                  style: TextStyle(
                                      fontSize: 16.0, fontWeight: FontWeight.bold),
                                ),
                                trailing: Text(
                                  timeago.format(DateTime.fromMillisecondsSinceEpoch(postsList[index].date)),
                                  style: TextStyle(fontSize: 12.0, color: Colors.grey),
                                ),

                              ),
                              subtitle: Padding(
                                padding: const EdgeInsets.only(bottom: 14.0),
                                child: Text(postsList[index].body, style: TextStyle(fontSize: 14.0),),
                              ),
                            ),
                          ),

Here's the _increment counter code:

    try {
      var ref = FirebaseDatabase.instance.reference().child('posts/{postId}/counter');
      await ref.once().then((data) async => {
        await ref.set(data.value + 1),

      });
    } catch (e) {
      print(e.message);
    }
  }

![Home page of blog]https://photos.google.com/share/AF1QipMK6C-Wx2vZHHbE2jDMQsfYNnwl9OWK_5W8OKOfiIChcXt-gnWnCH7ba_EpyRnRAA?key=cGxkRkVSSk9PQTdtTXB0MzZBRDNHNUVzSGxlcDVB

The blog posts are displayed as cards as in the image ... I'm trying to add an icon on the left side of the card(leading) plus an incrementing value everytime someone taps the icon. Something like the like button on facebook. And also save the data to firebase realtime database.

Any help is much appreciated ... Thank you all!

Answer 1

Thanks to everyone who helped with this:

Code for UI:

leading: FittedBox(
          fit: BoxFit.fitWidth,
           child: Row(
            children: <Widget>[
            Icon(Icons.favorite),
            Text(postsList[index].counter.toString()
                  ),
                 ],
                ),
            ),

Code for Function:

onTap: (){
     _incrementCounter(postsList[index].key);
}
...

void _incrementCounter(key) async {
    try {
      var ref = FirebaseDatabase.instance.reference().child('posts/'+ key +'/counter');
      await ref.once().then((data) async => {
        await ref.set(data.value + 1),
      });
    } catch (e) {
      print(e.message);
    }
  }
}

Answer 2

I think what you may want to do is add this function to your onPressed. You will also need to set the text of the next to the icon equal to the new value read.

void like() async {
    try {
      var ref = FirebaseDatabase.instance.reference().child('path to likes for a post');
      await ref.once().then((data) async => {
        await ref.set(data.value + 1);
      });
    } catch (e) {
      print(e.message);
    }
  }

Hope this helps.

P.S.- You may find this video of use: https://www.youtube.com/watch?v=l8_7RTRRmHo