accessibility: remove animations (expansion panels)

This commit is contained in:
Thibault Deckers 2021-09-28 12:35:22 +09:00
parent 78f891d3f8
commit 2280a3fa65
5 changed files with 20 additions and 0 deletions

View file

@ -103,6 +103,7 @@ class DurationsProvider extends StatelessWidget {
@immutable @immutable
class DurationsData { class DurationsData {
// common animations // common animations
final Duration expansionTileAnimation;
final Duration staggeredAnimation; final Duration staggeredAnimation;
final Duration staggeredAnimationPageTarget; final Duration staggeredAnimationPageTarget;
@ -110,12 +111,14 @@ class DurationsData {
final Duration staggeredAnimationDelay; final Duration staggeredAnimationDelay;
const DurationsData({ const DurationsData({
this.expansionTileAnimation = const Duration(milliseconds: 200),
this.staggeredAnimation = const Duration(milliseconds: 375), this.staggeredAnimation = const Duration(milliseconds: 375),
this.staggeredAnimationPageTarget = const Duration(milliseconds: 800), this.staggeredAnimationPageTarget = const Duration(milliseconds: 800),
}) : staggeredAnimationDelay = staggeredAnimation ~/ 6; }) : staggeredAnimationDelay = staggeredAnimation ~/ 6;
factory DurationsData.noAnimation() { factory DurationsData.noAnimation() {
return DurationsData( return DurationsData(
expansionTileAnimation: const Duration(microseconds: 1), // as of Flutter v2.5.1, `ExpansionPanelList` throws if animation duration is zero
staggeredAnimation: Duration.zero, staggeredAnimation: Duration.zero,
staggeredAnimationPageTarget: Duration.zero, staggeredAnimationPageTarget: Duration.zero,
); );

View file

@ -5,6 +5,7 @@ import 'dart:typed_data';
import 'package:aves/flutter_version.dart'; import 'package:aves/flutter_version.dart';
import 'package:aves/ref/mime_types.dart'; import 'package:aves/ref/mime_types.dart';
import 'package:aves/services/common/services.dart'; import 'package:aves/services/common/services.dart';
import 'package:aves/theme/durations.dart';
import 'package:aves/utils/constants.dart'; import 'package:aves/utils/constants.dart';
import 'package:aves/widgets/common/action_mixins/feedback.dart'; import 'package:aves/widgets/common/action_mixins/feedback.dart';
import 'package:aves/widgets/common/extensions/build_context.dart'; import 'package:aves/widgets/common/extensions/build_context.dart';
@ -15,6 +16,7 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:intl/intl.dart'; import 'package:intl/intl.dart';
import 'package:package_info_plus/package_info_plus.dart'; import 'package:package_info_plus/package_info_plus.dart';
import 'package:provider/provider.dart';
import 'package:url_launcher/url_launcher.dart'; import 'package:url_launcher/url_launcher.dart';
class BugReport extends StatefulWidget { class BugReport extends StatefulWidget {
@ -37,10 +39,12 @@ class _BugReportState extends State<BugReport> with FeedbackMixin {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final l10n = context.l10n; final l10n = context.l10n;
final animationDuration = context.select<DurationsData, Duration>((v) => v.expansionTileAnimation);
return ExpansionPanelList( return ExpansionPanelList(
expansionCallback: (index, isExpanded) { expansionCallback: (index, isExpanded) {
setState(() => _showInstructions = !isExpanded); setState(() => _showInstructions = !isExpanded);
}, },
animationDuration: animationDuration,
expandedHeaderPadding: EdgeInsets.zero, expandedHeaderPadding: EdgeInsets.zero,
elevation: 0, elevation: 0,
children: [ children: [

View file

@ -1,6 +1,8 @@
import 'package:aves/theme/durations.dart';
import 'package:aves/widgets/common/identity/highlight_title.dart'; import 'package:aves/widgets/common/identity/highlight_title.dart';
import 'package:expansion_tile_card/expansion_tile_card.dart'; import 'package:expansion_tile_card/expansion_tile_card.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class AvesExpansionTile extends StatelessWidget { class AvesExpansionTile extends StatelessWidget {
final String value; final String value;
@ -42,6 +44,8 @@ class AvesExpansionTile extends StatelessWidget {
], ],
); );
} }
final animationDuration = context.select<DurationsData, Duration>((v) => v.expansionTileAnimation);
final theme = Theme.of(context); final theme = Theme.of(context);
return Theme( return Theme(
data: theme.copyWith( data: theme.copyWith(
@ -61,6 +65,7 @@ class AvesExpansionTile extends StatelessWidget {
finalPadding: const EdgeInsets.symmetric(vertical: 6.0), finalPadding: const EdgeInsets.symmetric(vertical: 6.0),
baseColor: Colors.grey.shade900, baseColor: Colors.grey.shade900,
expandedColor: Colors.grey[850], expandedColor: Colors.grey[850],
duration: animationDuration,
shadowColor: theme.shadowColor, shadowColor: theme.shadowColor,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,

View file

@ -1,10 +1,12 @@
import 'package:aves/model/entry.dart'; import 'package:aves/model/entry.dart';
import 'package:aves/model/metadata/date_modifier.dart'; import 'package:aves/model/metadata/date_modifier.dart';
import 'package:aves/model/metadata/enums.dart'; import 'package:aves/model/metadata/enums.dart';
import 'package:aves/theme/durations.dart';
import 'package:aves/theme/format.dart'; import 'package:aves/theme/format.dart';
import 'package:aves/theme/icons.dart'; import 'package:aves/theme/icons.dart';
import 'package:aves/widgets/common/extensions/build_context.dart'; import 'package:aves/widgets/common/extensions/build_context.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'aves_dialog.dart'; import 'aves_dialog.dart';
@ -104,6 +106,7 @@ class _EditEntryDateDialogState extends State<EditEntryDateDialog> {
title: _tileText(l10n.editEntryDateDialogClear), title: _tileText(l10n.editEntryDateDialogClear),
); );
final animationDuration = context.select<DurationsData, Duration>((v) => v.expansionTileAnimation);
final theme = Theme.of(context); final theme = Theme.of(context);
return Theme( return Theme(
data: theme.copyWith( data: theme.copyWith(
@ -125,6 +128,7 @@ class _EditEntryDateDialogState extends State<EditEntryDateDialog> {
expansionCallback: (index, isExpanded) { expansionCallback: (index, isExpanded) {
setState(() => _showOptions = !isExpanded); setState(() => _showOptions = !isExpanded);
}, },
animationDuration: animationDuration,
expandedHeaderPadding: EdgeInsets.zero, expandedHeaderPadding: EdgeInsets.zero,
elevation: 0, elevation: 0,
children: [ children: [

View file

@ -2,12 +2,14 @@ import 'package:aves/model/entry.dart';
import 'package:aves/model/metadata/enums.dart'; import 'package:aves/model/metadata/enums.dart';
import 'package:aves/ref/brand_colors.dart'; import 'package:aves/ref/brand_colors.dart';
import 'package:aves/ref/mime_types.dart'; import 'package:aves/ref/mime_types.dart';
import 'package:aves/theme/durations.dart';
import 'package:aves/utils/color_utils.dart'; import 'package:aves/utils/color_utils.dart';
import 'package:aves/widgets/common/extensions/build_context.dart'; import 'package:aves/widgets/common/extensions/build_context.dart';
import 'package:aves/widgets/common/fx/highlight_decoration.dart'; import 'package:aves/widgets/common/fx/highlight_decoration.dart';
import 'package:aves/widgets/common/identity/highlight_title.dart'; import 'package:aves/widgets/common/identity/highlight_title.dart';
import 'package:collection/collection.dart'; import 'package:collection/collection.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'aves_dialog.dart'; import 'aves_dialog.dart';
@ -46,6 +48,7 @@ class _RemoveEntryMetadataDialogState extends State<RemoveEntryMetadataDialog> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final l10n = context.l10n; final l10n = context.l10n;
final animationDuration = context.select<DurationsData, Duration>((v) => v.expansionTileAnimation);
return AvesDialog( return AvesDialog(
context: context, context: context,
title: l10n.removeEntryMetadataDialogTitle, title: l10n.removeEntryMetadataDialogTitle,
@ -58,6 +61,7 @@ class _RemoveEntryMetadataDialogState extends State<RemoveEntryMetadataDialog> {
expansionCallback: (index, isExpanded) { expansionCallback: (index, isExpanded) {
setState(() => _showMore = !isExpanded); setState(() => _showMore = !isExpanded);
}, },
animationDuration: animationDuration,
expandedHeaderPadding: EdgeInsets.zero, expandedHeaderPadding: EdgeInsets.zero,
elevation: 0, elevation: 0,
children: [ children: [