mirror of
https://github.com/mdanics/fluttergram.git
synced 2025-07-04 07:36:57 +08:00
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:
180
assets/flare/Like.flr
Normal file
180
assets/flare/Like.flr
Normal file
File diff suppressed because one or more lines are too long
@ -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;
|
||||||
});
|
});
|
||||||
|
14
pubspec.lock
14
pubspec.lock
@ -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
|
||||||
|
@ -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
|
||||||
|
Reference in New Issue
Block a user