💫 Added entry animation to prayer time view

Added flutter_staggered_animations
mptwaktusolat · Aug 26, 2023 · e9eba36 · e9eba36
1 parent 09bf550
commit e9eba36
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 50 deletions.
diff --git a/lib/views/prayer_time_view.dart b/lib/views/prayer_time_view.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:provider/provider.dart';
 
@@ -76,57 +77,69 @@ class _PrayTimeListState extends State<PrayTimeList>
           nowIsha = true;
         }
 
-        return Column(
-          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-          mainAxisSize: MainAxisSize.max,
-          children: <Widget>[
-            if (showOtherPrayerTime)
-              SolatCard(
-                  time: today.imsak,
-                  name: AppLocalizations.of(context)!.imsakName,
-                  isOther: false),
-            SolatCard(
-              time: today.fajr,
-              name: AppLocalizations.of(context)!.fajrName,
-              isOther: true,
-              isCurrentPrayerTime: nowSubuh,
+        return AnimationLimiter(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+            mainAxisSize: MainAxisSize.max,
+            children: AnimationConfiguration.toStaggeredList(
+              childAnimationBuilder: (widget) {
+                return SlideAnimation(
+                  verticalOffset: 50.0,
+                  child: FadeInAnimation(
+                    child: widget,
+                  ),
+                );
+              },
+              children: [
+                if (showOtherPrayerTime)
+                  SolatCard(
+                      time: today.imsak,
+                      name: AppLocalizations.of(context)!.imsakName,
+                      isOther: false),
+                SolatCard(
+                  time: today.fajr,
+                  name: AppLocalizations.of(context)!.fajrName,
+                  isOther: true,
+                  isCurrentPrayerTime: nowSubuh,
+                ),
+                if (showOtherPrayerTime)
+                  SolatCard(
+                      time: today.syuruk,
+                      name: AppLocalizations.of(context)!.sunriseName,
+                      isOther: false),
+                if (showOtherPrayerTime)
+                  SolatCard(
+                      time: today.dhuha,
+                      name: AppLocalizations.of(context)!.dhuhaName,
+                      isOther: false),
+                SolatCard(
+                  time: today.dhuhr,
+                  name: AppLocalizations.of(context)!.dhuhrName,
+                  isOther: true,
+                  isCurrentPrayerTime: nowZohor,
+                ),
+                SolatCard(
+                  time: today.asr,
+                  name: AppLocalizations.of(context)!.asrName,
+                  isOther: true,
+                  isCurrentPrayerTime: nowAsar,
+                ),
+                SolatCard(
+                  time: today.maghrib,
+                  name: AppLocalizations.of(context)!.maghribName,
+                  isOther: true,
+                  isCurrentPrayerTime: nowMaghrib,
+                ),
+                SolatCard(
+                  time: today.isha,
+                  name: AppLocalizations.of(context)!.ishaName,
+                  isOther: true,
+                  isCurrentPrayerTime: nowIsha,
+                ),
+                const SizedBox(height: 10), // give some bottom space
+              ],
             ),
-            if (showOtherPrayerTime)
-              SolatCard(
-                  time: today.syuruk,
-                  name: AppLocalizations.of(context)!.sunriseName,
-                  isOther: false),
-            if (showOtherPrayerTime)
-              SolatCard(
-                  time: today.dhuha,
-                  name: AppLocalizations.of(context)!.dhuhaName,
-                  isOther: false),
-            SolatCard(
-              time: today.dhuhr,
-              name: AppLocalizations.of(context)!.dhuhrName,
-              isOther: true,
-              isCurrentPrayerTime: nowZohor,
-            ),
-            SolatCard(
-              time: today.asr,
-              name: AppLocalizations.of(context)!.asrName,
-              isOther: true,
-              isCurrentPrayerTime: nowAsar,
-            ),
-            SolatCard(
-              time: today.maghrib,
-              name: AppLocalizations.of(context)!.maghribName,
-              isOther: true,
-              isCurrentPrayerTime: nowMaghrib,
-            ),
-            SolatCard(
-              time: today.isha,
-              name: AppLocalizations.of(context)!.ishaName,
-              isOther: true,
-              isCurrentPrayerTime: nowIsha,
-            ),
-            const SizedBox(height: 10), // give some bottom space
-          ],
+          ),
         );
       },
     );

diff --git a/pubspec.lock b/pubspec.lock
@@ -397,6 +397,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "5.2.0"
+  flutter_staggered_animations:
+    dependency: "direct main"
+    description:
+      name: flutter_staggered_animations
+      sha256: "81d3c816c9bb0dca9e8a5d5454610e21ffb068aedb2bde49d2f8d04f75538351"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
   flutter_svg:
     dependency: "direct main"
     description:

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -49,6 +49,7 @@ dependencies:
   quick_actions: ^1.0.0
   firebase_crashlytics: ^3.0.5
   dynamic_color: ^1.6.2
+  flutter_staggered_animations: ^1.1.1
 
 dependency_overrides:
   # flutter compass in pub.dev is not updated