From a96c2b48f5adbd29b9a800a37d6b169415f13350 Mon Sep 17 00:00:00 2001 From: sinasystem Date: Thu, 9 Jun 2022 01:34:36 +0430 Subject: [PATCH] Add fade in animation --- README.md | 2 ++ lib/core/app_extension.dart | 25 ++++++++++---- .../office_furniture_detail_screen.dart | 17 +++++----- lib/src/view/widget/cart_list_view.dart | 2 +- lib/src/view/widget/fade_in_animation.dart | 33 +++++++++++++++++++ lib/src/view/widget/furniture_list_view.dart | 10 +++--- pubspec.lock | 7 ++++ pubspec.yaml | 2 +- 8 files changed, 77 insertions(+), 21 deletions(-) create mode 100644 lib/src/view/widget/fade_in_animation.dart diff --git a/README.md b/README.md index a77f918..5ddcb77 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,7 @@ Preview | List screen | Detail Screen │ | |──counter_button.dart │ | |──empty_widget.dart │ | |──furniture_list_view.dart + │ | |──fade_in_animation.dart | | └──rating_bar.dart └────📂controller └──office_furniture_controller.dart @@ -60,6 +61,7 @@ Package Name | |[smooth_page_indicator](https://pub.dev/packages/smooth_page_indicator) |[flutter_rating_bar](https://pub.dev/packages/flutter_rating_bar) |[font_awesome_flutter](https://pub.dev/packages/font_awesome_flutter) +|[simple_animations](https://pub.dev/packages/simple_animations) ## Created & Maintained By diff --git a/lib/core/app_extension.dart b/lib/core/app_extension.dart index 3b87e8a..76e16ca 100644 --- a/lib/core/app_extension.dart +++ b/lib/core/app_extension.dart @@ -1,3 +1,7 @@ +import 'package:flutter/material.dart'; + +import '../src/view/widget/fade_in_animation.dart'; + extension StringExtension on String { String get addOverFlow { if (length < 15) { @@ -6,7 +10,8 @@ extension StringExtension on String { return "${substring(0, 15)}..."; } } - double get dropSign{ + + double get dropSign { return double.parse(replaceAll("\$", "")); } } @@ -14,13 +19,21 @@ extension StringExtension on String { extension IterableExtension on Iterable { Iterable distinctBy(Object Function(T e) getCompareValue) { var result = []; - forEach((element) { - if (!result.any((x) => getCompareValue(x) == getCompareValue(element))) { - result.add(element); - } - }); + forEach( + (element) { + if (!result + .any((x) => getCompareValue(x) == getCompareValue(element))) { + result.add(element); + } + }, + ); return result; } } +extension WidgetExtension on Widget{ + Widget fadeAnimation(double delay){ + return FadeInAnimation(delay: delay, child: this); + } +} diff --git a/lib/src/view/screen/office_furniture_detail_screen.dart b/lib/src/view/screen/office_furniture_detail_screen.dart index f866f8a..08d735b 100644 --- a/lib/src/view/screen/office_furniture_detail_screen.dart +++ b/lib/src/view/screen/office_furniture_detail_screen.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:get/get.dart'; import 'package:office_furniture_store/core/app_color.dart'; +import 'package:office_furniture_store/core/app_extension.dart'; import 'package:office_furniture_store/core/app_style.dart'; import 'package:office_furniture_store/src/controller/office_furniture_controller.dart'; import 'package:office_furniture_store/src/view/widget/counter_button.dart'; @@ -80,7 +81,7 @@ class OfficeFurnitureDetailScreen extends StatelessWidget { ) ], ), - ); + ).fadeAnimation(1.3); } Widget furnitureImageSlider(double height) { @@ -122,7 +123,7 @@ class OfficeFurnitureDetailScreen extends StatelessWidget { ), ), ], - ), + ).fadeAnimation(0.2), ); } @@ -143,17 +144,17 @@ class OfficeFurnitureDetailScreen extends StatelessWidget { child: StarRatingBar( score: furniture.score, itemSize: 25, - ), + ).fadeAnimation(0.4), ), - const Padding( - padding: EdgeInsets.only(top: 20, bottom: 10), + Padding( + padding: const EdgeInsets.only(top: 20, bottom: 10), child: - Text("Synopsis", style: h2Style, textAlign: TextAlign.end), + const Text("Synopsis", style: h2Style, textAlign: TextAlign.end).fadeAnimation(0.6), ), Text(furniture.description, maxLines: 5, overflow: TextOverflow.ellipsis, - style: const TextStyle(color: Colors.black45)), + style: const TextStyle(color: Colors.black45)).fadeAnimation(0.8), const SizedBox(height: 20), Row( children: [ @@ -170,7 +171,7 @@ class OfficeFurnitureDetailScreen extends StatelessWidget { }, )) ], - ) + ).fadeAnimation(1.0) ], ), ), diff --git a/lib/src/view/widget/cart_list_view.dart b/lib/src/view/widget/cart_list_view.dart index d6d727f..e223d59 100644 --- a/lib/src/view/widget/cart_list_view.dart +++ b/lib/src/view/widget/cart_list_view.dart @@ -71,7 +71,7 @@ class CartListView extends StatelessWidget { ), ) ], - ), + ).fadeAnimation(0.4*index), ); }, separatorBuilder: (BuildContext context, int index) { diff --git a/lib/src/view/widget/fade_in_animation.dart b/lib/src/view/widget/fade_in_animation.dart new file mode 100644 index 0000000..0a102b6 --- /dev/null +++ b/lib/src/view/widget/fade_in_animation.dart @@ -0,0 +1,33 @@ +import 'package:flutter/material.dart'; +import 'package:simple_animations/simple_animations.dart'; + +enum AniProps { opacity, translateY } + +class FadeInAnimation extends StatelessWidget { + final double delay; + final Widget child; + + const FadeInAnimation({Key? key ,required this.delay, required this.child}):super(key: key); + + + @override + Widget build(BuildContext context) { + final tween = MultiTween() + ..add(AniProps.opacity, Tween(begin: 0.0, end: 1.0), const Duration(milliseconds: 500)) + ..add(AniProps.translateY, Tween(begin: -30.0, end: 0.0), const Duration(milliseconds: 500), + Curves.easeOut); + + + return PlayAnimation>( + delay: Duration(milliseconds: (500 * delay).round()), + duration: tween.duration, + tween: tween, + child: child, + builder: (context, child, value) => Opacity( + opacity: value.get(AniProps.opacity), + child: Transform.translate( + offset: Offset(0, value.get(AniProps.translateY),), child: child), + ), + ); + } +} \ No newline at end of file diff --git a/lib/src/view/widget/furniture_list_view.dart b/lib/src/view/widget/furniture_list_view.dart index 3f4a76b..bbd57ab 100644 --- a/lib/src/view/widget/furniture_list_view.dart +++ b/lib/src/view/widget/furniture_list_view.dart @@ -23,7 +23,7 @@ class FurnitureListView extends StatelessWidget { const SizedBox(width: 10), Text(furniture.score.toString(), style: h4Style), ], - ); + ).fadeAnimation(1.0); } Widget _furnitureImage(String image) { @@ -34,7 +34,7 @@ class FurnitureListView extends StatelessWidget { width: 150, height: 150, ), - ); + ).fadeAnimation(0.4); } Widget _listViewItem(Furniture furniture) { @@ -44,7 +44,7 @@ class FurnitureListView extends StatelessWidget { children: [ _furnitureImage(furniture.images[0]), const SizedBox(height: 10), - Text(furniture.title.addOverFlow, style: h4Style), + Text(furniture.title.addOverFlow, style: h4Style).fadeAnimation(0.8), _furnitureScore(furniture), ], ) @@ -58,7 +58,7 @@ class FurnitureListView extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text(furniture.title, style: h4Style), + Text(furniture.title, style: h4Style).fadeAnimation(0.8), const SizedBox(height: 5), _furnitureScore(furniture), const SizedBox(height: 5), @@ -67,7 +67,7 @@ class FurnitureListView extends StatelessWidget { style: h5Style.copyWith(fontSize: 12), maxLines: 2, overflow: TextOverflow.ellipsis, - ) + ).fadeAnimation(1.4) ], ), ), diff --git a/pubspec.lock b/pubspec.lock index bb7cd75..affd718 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -130,6 +130,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "1.8.0" + simple_animations: + dependency: "direct main" + description: + name: simple_animations + url: "https://pub.dartlang.org" + source: hosted + version: "4.0.2" sky_engine: dependency: transitive description: flutter diff --git a/pubspec.yaml b/pubspec.yaml index d2dc69f..9b0e5d6 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -38,7 +38,7 @@ dependencies: smooth_page_indicator: ^1.0.0+2 flutter_rating_bar: ^4.0.0 font_awesome_flutter: ^10.1.0 - + simple_animations: ^4.0.1 dev_dependencies: