staggered animation to view licenses and filter grids

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

View file

@ -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(),
],
),
),
),
);

View file

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

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/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<MediaQueryData, double>(
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<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(

View file

@ -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:

View file

@ -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: