problem with OnTap

[mohammadne]

I tried your documentation
but when I register OnTap I loose animation effect.
this is my code:

LikeButton(
                            size: 30.0,
                            circleColor: CircleColor(
                              start: Color(0xffE9C349),
                              end: Colors.red,
                            ),
                            onTap: (isLiked) async {
                              await gen.addMusicsToFavorite();
                              final Completer<bool> completer =
                                  new Completer<bool>();
                              Timer(
                                const Duration(milliseconds: 200),
                                () {
                                  completer.complete(gen.music['is_favorite']);
                                  return completer.future;
                                },
                              );
                            },
                            bubblesColor: BubblesColor(
                              dotPrimaryColor: Colors.red,
                              dotSecondaryColor: Color(0xffE9C349),
                            ),
                            isLiked: gen.music['is_favorite'],
                            likeBuilder: (bool isLiked) {
                              return isLiked
                                  ? Icon(
                                      Icons.favorite,
                                      color: Color(0xffE9C349),
                                      size: 30.0,
                                    )
                                  : Icon(
                                      Icons.favorite_border,
                                      color: Colors.white,
                                    );
                            },
                          ),

in my provider class I execute addMusicsToFavorite and then the result will be gen.music['is_favorite'],

[zmtzawqlp]

why use Timer？ it's just demo to do as we request service.

                        onTap: (isLiked) async {
                          await gen.addMusicsToFavorite();
                          final Completer<bool> completer =
                              new Completer<bool>();
                          Timer(
                            const Duration(milliseconds: 200),
                            () {
                              completer.complete(gen.music['is_favorite']);
                              return completer.future;
                            },
                          );
                        },

you need to know how to do it with async /await. i did't see any return from your code

[mohammadne]

I am new to this future topic , but what am I doing is below now is :

onTap: (_) => gen.addFavoriteMusics()

and addFavoriteMusics is

  Future<bool> addFavoriteMusics() async {
    try {
      var resp = await Music().name('/favorite').favoritePost(
      body: {'favorite': _music['is_favorite'] == true ? '0' : '1'},
      id: _music['id'],
      );
      _music['is_favorite'] = !_music['is_favorite'];
      //if it is done , do following with server
      _favoriteMusics =
            await Music().include(['album.artists']).favorite().$get();
        notifyListeners();
        return _music['is_favorite'];
      
    } catch (e) {
      return null;
    }
  }

it workes fine but it doesn't have any animation .
can you please help me that what is my problem ?

[mohammadne]

also I want optimistic updating effect , how can I implement that ?

[mohammadne]

any idea?

[guit4eva]

Did you figure this out?

[zmtzawqlp]

plz provide a runnable demo to show your issue。

[guit4eva]

Rough working code for reference for @mohammadne :

class _LikeButtonMainState extends State<LikeButtonMain> {
  bool _isLiked = false;
  @override
  Widget build(BuildContext context) {
    return LikeButton(
      onTap: (bool isLiked) {
        return _like(_isLiked).then((value) {
          _isLiked = value;
          return value;
        });
      },
      circleColor: CircleColor(start: Color(0xff00ddff), end: Color(0xff0099cc)),
      bubblesColor: BubblesColor(
        dotPrimaryColor: Color(0xff33b5e5),
        dotSecondaryColor: Color(0xff0099cc),
      ),
      likeBuilder: (bool isLiked) {
        return Icon(
          Icons.favorite,
          color: _isLiked ? Color(0xFFDF5757) : Colors.grey,
        );
      },
    );
  }

  Future<bool> _like(isLiked) async {
    isLiked = !isLiked;
    return isLiked;
  }
}

[zmtzawqlp]

class _LikeButtonMainState extends State {
bool _isLiked = false;
@OverRide
Widget build(BuildContext context) {
return LikeButton(
onTap: (bool isLiked) {
return _like(isLiked);
},
circleColor: CircleColor(start: Color(0xff00ddff), end: Color(0xff0099cc)),
bubblesColor: BubblesColor(
dotPrimaryColor: Color(0xff33b5e5),
dotSecondaryColor: Color(0xff0099cc),
),
likeBuilder: (bool isLiked) {
return Icon(
Icons.favorite,
color: _isLiked ? Color(0xFFDF5757) : Colors.grey,
);
},
);
}

Future _like(isLiked) async {
isLiked = !isLiked;
return isLiked;
}
}

[zmtzawqlp]

onTap is asynchronous call back

[zmtzawqlp]

please double check codes in demo

[mohammadne]

Thanks alot.