Add fade in animation

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

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,21 +10,30 @@ extension StringExtension on String {
       return "${substring(0, 15)}...";
     }
   }
-  double get dropSign{
+
+  double get dropSign {
     return double.parse(replaceAll("\$", ""));
   }
 }
 
 extension IterableExtension<T> on Iterable<T> {
   Iterable<T> distinctBy(Object Function(T e) getCompareValue) {
     var result = <T>[];
-    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);
+  }
+}
 

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)
             ],
           ),
         ),

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) {

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<AniProps>()
+      ..add(AniProps.opacity, Tween<double>(begin: 0.0, end: 1.0), const Duration(milliseconds: 500))
+      ..add(AniProps.translateY, Tween<double>(begin: -30.0, end: 0.0), const Duration(milliseconds: 500),
+          Curves.easeOut);
+
+
+    return PlayAnimation<MultiTweenValues<AniProps>>(
+      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),
+      ),
+    );
+  }
+}

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)
                     ],
                   ),
                 ),

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

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: