From 61f4b621eb9f166994fb412b16c77fcef65dbd0b Mon Sep 17 00:00:00 2001 From: Thibault Deckers Date: Mon, 8 Jun 2020 11:07:43 +0900 Subject: [PATCH] staggered animation to view licenses and filter grids --- lib/widgets/about/about_page.dart | 51 +++++++++-------- lib/widgets/about/licenses.dart | 13 ++++- lib/widgets/filter_grid_page.dart | 92 +++++++++++++++++++------------ pubspec.lock | 7 +++ pubspec.yaml | 1 + 5 files changed, 103 insertions(+), 61 deletions(-) diff --git a/lib/widgets/about/about_page.dart b/lib/widgets/about/about_page.dart index cc8b4c989..727f59028 100644 --- a/lib/widgets/about/about_page.dart +++ b/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,35 +10,37 @@ class AboutPage extends StatelessWidget { title: const Text('About'), ), body: SafeArea( - child: CustomScrollView( - slivers: [ - SliverPadding( - padding: const EdgeInsets.only(top: 16), - sliver: SliverList( - delegate: SliverChildListDelegate( - [ - Center( - child: Text.rich( - TextSpan( - children: [ - const TextSpan(text: 'Made with ❤️ and '), - WidgetSpan( - child: FlutterLogo( - size: Theme.of(context).textTheme.bodyText2.fontSize * 1.25, + child: AnimationLimiter( + child: CustomScrollView( + slivers: [ + SliverPadding( + padding: const EdgeInsets.only(top: 16), + sliver: SliverList( + delegate: SliverChildListDelegate( + [ + Center( + child: Text.rich( + TextSpan( + children: [ + const TextSpan(text: 'Made with ❤️ and '), + WidgetSpan( + child: FlutterLogo( + size: Theme.of(context).textTheme.bodyText2.fontSize * 1.25, + ), ), - ), - ], + ], + ), ), ), - ), - const SizedBox(height: 8), - const Divider(), - ], + const SizedBox(height: 8), + const Divider(), + ], + ), ), ), - ), - Licenses(), - ], + Licenses(), + ], + ), ), ), ); diff --git a/lib/widgets/about/licenses.dart b/lib/widgets/about/licenses.dart index 6e5d924bc..78d900266 100644 --- a/lib/widgets/about/licenses.dart +++ b/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 { 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, ), diff --git a/lib/widgets/filter_grid_page.dart b/lib/widgets/filter_grid_page.dart index 82c3c2e65..058d9b419 100644 --- a/lib/widgets/filter_grid_page.dart +++ b/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,45 +89,64 @@ class FilterGridPage extends StatelessWidget { return MediaQueryDataProvider( child: Scaffold( body: SafeArea( - child: CustomScrollView( - slivers: [ - appBar, - filterKeys.isEmpty - ? SliverFillRemaining( - child: emptyBuilder(), - hasScrollBody: false, - ) - : SliverPadding( - padding: const EdgeInsets.all(AvesFilterChip.outlineWidth), - sliver: SliverGrid( - delegate: SliverChildBuilderDelegate( - (context, i) { - final key = filterKeys[i]; - return DecoratedFilterChip( - source: source, - filter: filterBuilder(key), - entry: filterEntries[key], - onPressed: onPressed, - ); - }, - childCount: filterKeys.length, - ), - gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent( - maxCrossAxisExtent: maxCrossAxisExtent, - mainAxisSpacing: 8, - crossAxisSpacing: 8, - ), + child: Selector( + selector: (c, mq) => mq.size.width, + builder: (c, mqWidth, child) { + final columnCount = (mqWidth / maxCrossAxisExtent).ceil(); + return AnimationLimiter( + child: CustomScrollView( + slivers: [ + appBar, + filterKeys.isEmpty + ? SliverFillRemaining( + child: emptyBuilder(), + hasScrollBody: false, + ) + : SliverPadding( + padding: const EdgeInsets.all(AvesFilterChip.outlineWidth), + sliver: SliverGrid( + delegate: SliverChildBuilderDelegate( + (context, i) { + final key = filterKeys[i]; + 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, + ), + gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent( + maxCrossAxisExtent: maxCrossAxisExtent, + mainAxisSpacing: 8, + crossAxisSpacing: 8, + ), + ), + ), + SliverToBoxAdapter( + child: Selector( + selector: (context, mq) => mq.viewInsets.bottom, + builder: (context, mqViewInsetsBottom, child) { + return SizedBox(height: mqViewInsetsBottom); + }, ), ), - SliverToBoxAdapter( - child: Selector( - selector: (context, mq) => mq.viewInsets.bottom, - builder: (context, mqViewInsetsBottom, child) { - return SizedBox(height: mqViewInsetsBottom); - }, + ], ), - ), - ], + ); + }, ), ), drawer: AppDrawer( diff --git a/pubspec.lock b/pubspec.lock index bc343c2ce..a5381b6ca 100644 --- a/pubspec.lock +++ b/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: diff --git a/pubspec.yaml b/pubspec.yaml index a32f296b9..8394b5e7e 100644 --- a/pubspec.yaml +++ b/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: