Add animation to Heart when liking a post (#77)

* initial flare implementation * fix warnings * fix merge * use flare from pub & minor adjustments to animation
mdanics · Jan 4, 2020 · 124b9f9 · 124b9f9
1 parent d7a2275
commit 124b9f9
Show file tree

Hide file tree

Showing 4 changed files with 208 additions and 10 deletions.
diff --git a/assets/flare/Like.flr b/assets/flare/Like.flr
diff --git a/lib/image_post.dart b/lib/image_post.dart
@@ -6,6 +6,7 @@ import 'dart:async';
 import 'profile_page.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'comment_screen.dart';
+import 'package:flare_flutter/flare_actor.dart';
 
 class ImagePost extends StatefulWidget {
   const ImagePost(
@@ -135,7 +136,6 @@ class _ImagePost extends State<ImagePost> {
       child: Stack(
         alignment: Alignment.center,
         children: <Widget>[
-//          FadeInImage.memoryNetwork(placeholder: kTransparentImage, image: mediaUrl),
           CachedNetworkImage(
             imageUrl: mediaUrl,
             fit: BoxFit.fitWidth,
@@ -144,13 +144,15 @@ class _ImagePost extends State<ImagePost> {
           ),
           showHeart
               ? Positioned(
-                  child: Opacity(
-                      opacity: 0.85,
-                      child: Icon(
-                        FontAwesomeIcons.solidHeart,
-                        size: 80.0,
-                        color: Colors.white,
-                      )),
+                  child: Container(
+                    width: 100,
+                    height: 100,
+                    child:  Opacity(
+                        opacity: 0.85,
+                        child: FlareActor("assets/flare/Like.flr",
+                          animation: "Like",
+                        )),
+                  ),
                 )
               : Container()
         ],
@@ -287,7 +289,7 @@ class _ImagePost extends State<ImagePost> {
         likes[userId] = true;
         showHeart = true;
       });
-      Timer(const Duration(milliseconds: 500), () {
+      Timer(const Duration(milliseconds: 2000), () {
         setState(() {
           showHeart = false;
         });

diff --git a/pubspec.lock b/pubspec.lock
@@ -99,6 +99,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "3.0.4"
+  flare_dart:
+    dependency: transitive
+    description:
+      name: flare_dart
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.3.2"
+  flare_flutter:
+    dependency: "direct main"
+    description:
+      name: flare_flutter
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.8.3"
   flutter:
     dependency: "direct main"
     description: flutter

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -19,6 +19,7 @@ dependencies:
   firebase_messaging: ^5.1.2
   location: ^2.3.5
   geocoder: ^0.2.1
+  flare_flutter: ^1.8.3
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
@@ -45,6 +46,7 @@ flutter:
     - asset: assets/fonts/Billabong.ttf
   assets:
   - assets/images/google_signin_button.png
+  - assets/flare/Like.flr
   # To add assets to your application, add an assets section, like this:
   # assets:
   #  - images/a_dot_burr.jpeg
@@ -73,5 +75,5 @@ flutter:
   #       - asset: fonts/TrajanPro_Bold.ttf
   #         weight: 700
   #
-  # For details regarding fonts from package dependencies, 
+  # For details regarding fonts from package dependencies,
   # see https://flutter.io/custom-fonts/#from-packages