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

* initial flare implementation

* fix warnings

* fix merge

* use flare from pub & minor adjustments to animation
This commit is contained in:
Matthew Danics
2020-01-04 11:54:29 -05:00
committed by GitHub
parent d7a227533f
commit 124b9f9b38
4 changed files with 208 additions and 10 deletions

180
assets/flare/Like.flr Normal file

File diff suppressed because one or more lines are too long

View File

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

View File

@ -99,6 +99,20 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "3.0.4" 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: flutter:
dependency: "direct main" dependency: "direct main"
description: flutter description: flutter

View File

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