Fabio/aves
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

staggered animation to view licenses and filter grids

Browse source
This commit is contained in:
Thibault Deckers 2020-06-08 11:07:43 +09:00
parent 3956f6aa0d
commit 61f4b621eb
5 changed files with 103 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
lib/widgets/about/about_page.dart
View file

@ -1,5 +1,6 @@
import 'package:aves/widgets/about/licenses.dart'; import 'package:aves/widgets/about/licenses.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
class AboutPage extends StatelessWidget { class AboutPage extends StatelessWidget {
@override @override
@ -9,35 +10,37 @@ class AboutPage extends StatelessWidget {
title: const Text('About'), title: const Text('About'),
), ),
body: SafeArea( body: SafeArea(
child: CustomScrollView( child: AnimationLimiter(
slivers: [ child: CustomScrollView(
SliverPadding( slivers: [
padding: const EdgeInsets.only(top: 16), SliverPadding(
sliver: SliverList( padding: const EdgeInsets.only(top: 16),
delegate: SliverChildListDelegate( sliver: SliverList(
[ delegate: SliverChildListDelegate(
Center( [
child: Text.rich( Center(
TextSpan( child: Text.rich(
children: [ TextSpan(
const TextSpan(text: 'Made with ❤️ and '), children: [
WidgetSpan( const TextSpan(text: 'Made with ❤️ and '),
child: FlutterLogo( WidgetSpan(
size: Theme.of(context).textTheme.bodyText2.fontSize * 1.25, child: FlutterLogo(
size: Theme.of(context).textTheme.bodyText2.fontSize * 1.25,
),
), ),
), ],
], ),
), ),
), ),
), const SizedBox(height: 8),
const SizedBox(height: 8), const Divider(),
const Divider(), ],
], ),
), ),
), ),
), Licenses(),
Licenses(), ],
], ),
), ),
), ),
); );

13
lib/widgets/about/licenses.dart
View file

@ -3,6 +3,7 @@ import 'package:aves/widgets/common/icons.dart';
import 'package:aves/widgets/common/menu_row.dart'; import 'package:aves/widgets/common/menu_row.dart';
import 'package:collection/collection.dart'; import 'package:collection/collection.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import 'package:url_launcher/url_launcher.dart'; import 'package:url_launcher/url_launcher.dart';
class Licenses extends StatefulWidget { class Licenses extends StatefulWidget {
@ -44,7 +45,17 @@ class _LicensesState extends State<Licenses> {
if (index-- == 0) { if (index-- == 0) {
return _buildHeader(); 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, childCount: _packages.length + 1,
), ),

92
lib/widgets/filter_grid_page.dart
View file

@ -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/icons.dart';
import 'package:aves/widgets/common/image_providers/thumbnail_provider.dart'; import 'package:aves/widgets/common/image_providers/thumbnail_provider.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
@ -88,45 +89,64 @@ class FilterGridPage extends StatelessWidget {
return MediaQueryDataProvider( return MediaQueryDataProvider(
child: Scaffold( child: Scaffold(
body: SafeArea( body: SafeArea(
child: CustomScrollView( child: Selector<MediaQueryData, double>(
slivers: [ selector: (c, mq) => mq.size.width,
appBar, builder: (c, mqWidth, child) {
filterKeys.isEmpty final columnCount = (mqWidth / maxCrossAxisExtent).ceil();
? SliverFillRemaining( return AnimationLimiter(
child: emptyBuilder(), child: CustomScrollView(
hasScrollBody: false, slivers: [
) appBar,
: SliverPadding( filterKeys.isEmpty
padding: const EdgeInsets.all(AvesFilterChip.outlineWidth), ? SliverFillRemaining(
sliver: SliverGrid( child: emptyBuilder(),
delegate: SliverChildBuilderDelegate( hasScrollBody: false,
(context, i) { )
final key = filterKeys[i]; : SliverPadding(
return DecoratedFilterChip( padding: const EdgeInsets.all(AvesFilterChip.outlineWidth),
source: source, sliver: SliverGrid(
filter: filterBuilder(key), delegate: SliverChildBuilderDelegate(
entry: filterEntries[key], (context, i) {
onPressed: onPressed, final key = filterKeys[i];
); final child = DecoratedFilterChip(
}, source: source,
childCount: filterKeys.length, filter: filterBuilder(key),
), entry: filterEntries[key],
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent( onPressed: onPressed,
maxCrossAxisExtent: maxCrossAxisExtent, );
mainAxisSpacing: 8, return AnimationConfiguration.staggeredGrid(
crossAxisSpacing: 8, 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<MediaQueryData, double>(
selector: (context, mq) => mq.viewInsets.bottom,
builder: (context, mqViewInsetsBottom, child) {
return SizedBox(height: mqViewInsetsBottom);
},
), ),
), ),
SliverToBoxAdapter( ],
child: Selector<MediaQueryData, double>(
selector: (context, mq) => mq.viewInsets.bottom,
builder: (context, mqViewInsetsBottom, child) {
return SizedBox(height: mqViewInsetsBottom);
},
), ),
), );
], },
), ),
), ),
drawer: AppDrawer( drawer: AppDrawer(

7
pubspec.lock
View file

@ -139,6 +139,13 @@ packages:
url: "https://pub.dartlang.org" url: "https://pub.dartlang.org"
source: hosted source: hosted
version: "1.0.8" 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: flutter_svg:
dependency: "direct main" dependency: "direct main"
description: description:

1
pubspec.yaml
View file

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