staggered animation to view licenses and filter grids

lib/widgets/about/about_page.dart

@@ -1,5 +1,6 @@
 import 'package:aves/widgets/about/licenses.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
 
 class AboutPage extends StatelessWidget {
   @override
@@ -9,6 +10,7 @@ class AboutPage extends StatelessWidget {
         title: const Text('About'),
       ),
       body: SafeArea(
+        child: AnimationLimiter(
           child: CustomScrollView(
             slivers: [
               SliverPadding(
@@ -40,6 +42,7 @@ class AboutPage extends StatelessWidget {
             ],
           ),
         ),
+      ),
     );
   }
 }

lib/widgets/about/licenses.dart

@@ -3,6 +3,7 @@ import 'package:aves/widgets/common/icons.dart';
 import 'package:aves/widgets/common/menu_row.dart';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 class Licenses extends StatefulWidget {
@@ -44,7 +45,17 @@ class _LicensesState extends State<Licenses> {
             if (index-- == 0) {
               return _buildHeader();
             }
-            return LicenseRow(_packages[index]);
+            final child = LicenseRow(_packages[index]);
+            return AnimationConfiguration.staggeredList(
+              position: index,
+              duration: const Duration(milliseconds: 375),
+              child: SlideAnimation(
+                verticalOffset: 50.0,
+                child: FadeInAnimation(
+                  child: child,
+                ),
+              ),
+            );
           },
           childCount: _packages.length + 1,
         ),

lib/widgets/filter_grid_page.dart

@@ -16,6 +16,7 @@ import 'package:aves/widgets/common/data_providers/media_query_data_provider.dar
 import 'package:aves/widgets/common/icons.dart';
 import 'package:aves/widgets/common/image_providers/thumbnail_provider.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:provider/provider.dart';
 
@@ -88,6 +89,11 @@ class FilterGridPage extends StatelessWidget {
     return MediaQueryDataProvider(
       child: Scaffold(
         body: SafeArea(
+          child: Selector<MediaQueryData, double>(
+            selector: (c, mq) => mq.size.width,
+            builder: (c, mqWidth, child) {
+              final columnCount = (mqWidth / maxCrossAxisExtent).ceil();
+              return AnimationLimiter(
                 child: CustomScrollView(
                   slivers: [
                     appBar,
@@ -102,12 +108,23 @@ class FilterGridPage extends StatelessWidget {
                               delegate: SliverChildBuilderDelegate(
                                 (context, i) {
                                   final key = filterKeys[i];
-                            return DecoratedFilterChip(
+                                  final child = DecoratedFilterChip(
                                     source: source,
                                     filter: filterBuilder(key),
                                     entry: filterEntries[key],
                                     onPressed: onPressed,
                                   );
+                                  return AnimationConfiguration.staggeredGrid(
+                                    position: i,
+                                    columnCount: columnCount,
+                                    duration: const Duration(milliseconds: 375),
+                                    child: SlideAnimation(
+                                      verticalOffset: 50.0,
+                                      child: FadeInAnimation(
+                                        child: child,
+                                      ),
+                                    ),
+                                  );
                                 },
                                 childCount: filterKeys.length,
                               ),
@@ -128,6 +145,9 @@ class FilterGridPage extends StatelessWidget {
                     ),
                   ],
                 ),
+              );
+            },
+          ),
         ),
         drawer: AppDrawer(
           source: source,

pubspec.lock

@@ -139,6 +139,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.8"
+  flutter_staggered_animations:
+    dependency: "direct main"
+    description:
+      name: flutter_staggered_animations
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.2"
   flutter_svg:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -54,6 +54,7 @@ dependencies:
   #    git:
   #      url: git://github.com/deckerst/flutter_ijkplayer.git
   flutter_native_timezone:
+  flutter_staggered_animations:
   flutter_svg:
   geocoder:
   google_maps_flutter: