flutter/flutter-wonderous-app
1
0
Fork 0
mirror of https://github.com/gskinnerTeam/flutter-wonderous-app.git synced 2025-05-17 12:56:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #205 from gskinnerTeam/accessability-pass

Browse Source 
Accessibility Improvements
This commit is contained in:
Shawn
2025-04-16 10:31:26 -06:00
committed by GitHub
parent f98eba2548 4512eb7a58
commit dec1289fae
56 changed files with 707 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/l10n/app_en.arb
View File

@ -32,8 +32,8 @@
"appModalsButtonOk": "Ok",
"appModalsButtonCancel": "Cancel",
"appPageDefaultTitlePage": "page",
"appPageSemanticSwipe": "{pageTitle} {count} of {total}.",
"@appPageSemanticSwipe": {"placeholders": {"pageTitle": {}, "total": {}, "count": {}}},
"appPageSemanticSwipe": "{pageTitle} {current} of {total}.",
"@appPageSemanticSwipe": {"placeholders": {"pageTitle": {}, "current": {}, "total": {}}},
"artifactsTitleArtifacts": "ARTIFACTS",
"semanticsPrevious": "Previous {title}",
"@semanticsPrevious": {"placeholders": {"title": {}}},

2
lib/l10n/app_zh.arb
View File

@ -25,7 +25,7 @@
"appModalsButtonOk": "确定",
"appModalsButtonCancel": "取消",
"appPageDefaultTitlePage": "页",
"appPageSemanticSwipe": "{pageTitle} {total} 之 {count}.",
"appPageSemanticSwipe": "{pageTitle} {total} 之 {current}.",
"artifactsTitleArtifacts": "文物",
"semanticsPrevious": "之前的文物{title}",
"semanticsNext": "下一个文物{title}",

45
lib/logic/common/animate_utils.dart Normal file
View File

@ -0,0 +1,45 @@
import 'package:wonders/common_libs.dart';
// ignore: must_be_immutable
class NeverAnimate extends Animate {
NeverAnimate({super.key, super.child});
@override
State<NeverAnimate> createState() => _NeverAnimateState();
}
class _NeverAnimateState extends State<NeverAnimate> {
@override
Widget build(BuildContext context) => widget.child;
}
extension MaybeAnimateExtension on Widget {
Animate maybeAnimate({
Key? key,
List<Effect>? effects,
AnimateCallback? onInit,
AnimateCallback? onPlay,
AnimateCallback? onComplete,
bool? autoPlay,
Duration? delay,
AnimationController? controller,
Adapter? adapter,
double? target,
double? value,
}) => $styles.disableAnimations
? NeverAnimate(child: this)
: Animate(
key: key,
effects: effects,
onInit: onInit,
onPlay: onPlay,
onComplete: onComplete,
autoPlay: autoPlay,
delay: delay,
controller: controller,
adapter: adapter,
target: target,
value: value,
child: this,
);
}

30
lib/router.dart
View File

@ -42,24 +42,20 @@ class ScreenPaths {
// Routes that are used multiple times
AppRoute get _artifactRoute => AppRoute(
'artifact/:artifactId',
(s) => ArtifactDetailsScreen(artifactId: s.pathParameters['artifactId']!),
);
'artifact/:artifactId',
(s) => ArtifactDetailsScreen(artifactId: s.pathParameters['artifactId']!),
);
AppRoute get _timelineRoute {
return AppRoute(
'timeline',
(s) => TimelineScreen(type: _tryParseWonderType(s.uri.queryParameters['type']!)),
);
}
AppRoute get _timelineRoute => AppRoute(
'timeline',
(s) => TimelineScreen(type: _tryParseWonderType(s.uri.queryParameters['type']!)),
);
AppRoute get _collectionRoute {
return AppRoute(
'collection',
(s) => CollectionScreen(fromId: s.uri.queryParameters['id'] ?? ''),
routes: [_artifactRoute],
);
}
AppRoute get _collectionRoute => AppRoute(
'collection',
(s) => CollectionScreen(fromId: s.uri.queryParameters['id'] ?? ''),
routes: [_artifactRoute],
);
/// Routing table, matches string paths to UI Screens, optionally parses params from the paths
final appRouter = GoRouter(
@ -132,7 +128,7 @@ class AppRoute extends GoRoute {
body: builder(state),
resizeToAvoidBottomInset: false,
);
if (useFade) {
if (useFade || $styles.disableAnimations) {
return CustomTransitionPage(
key: state.pageKey,
child: pageContent,

1
lib/styles/colors.dart
View File

@ -7,6 +7,7 @@ class AppColors {
/// Common
final Color accent1 = Color(0xFFE4935D);
final Color accent2 = Color(0xFFBEABA1);
final Color accent3 = Color(0xFFC47642);
final Color offWhite = Color(0xFFF8ECE5);
final Color caption = const Color(0xFF7D7873);
final Color body = const Color(0xFF514F4D);

17
lib/styles/styles.dart
View File

@ -1,12 +1,13 @@
// ignore_for_file: library_private_types_in_public_api
import 'package:wonders/common_libs.dart';
import 'package:wonders/ui/common/utils/duration_utils.dart';
export 'colors.dart';
@immutable
class AppStyle {
AppStyle({Size? screenSize}) {
AppStyle({Size? screenSize, this.disableAnimations = false, this.highContrast = false}) {
if (screenSize == null) {
scale = 1;
return;
@ -24,6 +25,8 @@ class AppStyle {
}
late final double scale;
late final bool disableAnimations;
late final bool highContrast;
/// The current theme colors for the app
final AppColors colors = AppColors();
@ -40,7 +43,7 @@ class AppStyle {
late final _Text text = _Text(scale);
/// Animation Durations
final _Times times = _Times();
late final _Times times = _Times();
/// Shared sizes
late final _Sizes sizes = _Sizes();
@ -133,10 +136,12 @@ class _Text {
@immutable
class _Times {
final Duration fast = Duration(milliseconds: 300);
final Duration med = Duration(milliseconds: 600);
final Duration slow = Duration(milliseconds: 900);
final Duration pageTransition = Duration(milliseconds: 200);
_Times();
late final Duration fast = 300.animateMs;
late final Duration med = 600.animateMs;
late final Duration slow = 900.animateMs;
late final Duration extraSlow = 1300.animateMs;
late final Duration pageTransition = 200.animateMs;
}
@immutable

2
lib/ui/app_scaffold.dart
View File

@ -15,7 +15,7 @@ class WondersAppScaffold extends StatelessWidget {
// Set default timing for animations in the app
Animate.defaultDuration = _style.times.fast;
// Create a style object that will be passed down the widget tree
_style = AppStyle(screenSize: context.sizePx);
_style = AppStyle(screenSize: context.sizePx, disableAnimations: mq.disableAnimations, highContrast: mq.highContrast);
return KeyedSubtree(
key: ValueKey($styles.scale),
child: Theme(

6
lib/ui/common/collectible_item.dart
View File

@ -1,8 +1,10 @@
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/collectibles_logic.dart';
import 'package:wonders/logic/common/animate_utils.dart';
import 'package:wonders/logic/data/collectible_data.dart';
import 'package:wonders/ui/common/opening_card.dart';
import 'package:wonders/ui/common/utils/app_haptics.dart';
import 'package:wonders/ui/common/utils/duration_utils.dart';
import 'package:wonders/ui/screens/collectible_found/collectible_found_screen.dart';
class CollectibleItem extends StatelessWidget with GetItMixin {
@ -53,8 +55,8 @@ class CollectibleItem extends StatelessWidget with GetItMixin {
fit: BoxFit.contain,
),
)
.animate(onPlay: (controller) => controller.repeat())
.shimmer(delay: 4000.ms, duration: $styles.times.med * 3)
.maybeAnimate(onPlay: (controller) => controller.repeat())
.shimmer(delay: 4000.delayMs, duration: $styles.times.med * 3)
.shake(curve: Curves.easeInOutCubic, hz: 4)
.scale(begin: Offset(1.0, 1.0), end: Offset(1.1, 1.1), duration: $styles.times.med)
.then(delay: $styles.times.med)

3
lib/ui/common/compass_divider.dart
View File

@ -1,5 +1,6 @@
import 'package:flutter_svg/flutter_svg.dart';
import 'package:wonders/common_libs.dart';
import 'package:wonders/ui/common/utils/duration_utils.dart';
class CompassDivider extends StatelessWidget {
const CompassDivider({super.key, required this.isExpanded, this.duration, this.linesColor, this.compassColor});
@ -10,7 +11,7 @@ class CompassDivider extends StatelessWidget {
@override
Widget build(BuildContext context) {
Duration duration = this.duration ?? 1500.ms;
Duration duration = this.duration ?? 1500.animateMs;
Widget buildHzAnimatedDivider({bool alignLeft = false}) {
return TweenAnimationBuilder<double>(
duration: duration,

3
lib/ui/common/controls/buttons.dart
View File

@ -1,5 +1,6 @@
import 'package:wonders/common_libs.dart';
import 'package:wonders/ui/common/app_icons.dart';
import 'package:wonders/ui/common/ignore_pointer.dart';
/// Shared methods across button types
Widget _buildIcon(BuildContext context, AppIcons icon, {required bool isSecondary, required double? size}) =>
@ -154,7 +155,7 @@ class AppBtn extends StatelessWidget {
),
if (focus.hasFocus)
Positioned.fill(
child: IgnorePointer(
child: IgnorePointerAndSemantics(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular($styles.corners.md),

28
lib/ui/common/controls/eight_way_swipe_detector.dart
View File

@ -1,4 +1,6 @@
import 'package:flutter/gestures.dart';
import 'package:wonders/common_libs.dart';
import 'package:wonders/ui/common/controls/trackpad_listener.dart';
class EightWaySwipeDetector extends StatefulWidget {
const EightWaySwipeDetector({super.key, required this.child, this.threshold = 50, required this.onSwipe});
@ -40,12 +42,16 @@ class _EightWaySwipeDetectorState extends State<EightWaySwipeDetector> {
}
}
void _handleSwipeStart(d) {
_isSwiping = true;
void _trackpadSwipe(Offset delta) {
widget.onSwipe?.call(delta);
}
void _handleSwipeStart(DragStartDetails d) {
_isSwiping = d.kind != null;
_startPos = _endPos = d.localPosition;
}
void _handleSwipeUpdate(d) {
void _handleSwipeUpdate(DragUpdateDetails d) {
_endPos = d.localPosition;
_maybeTriggerSwipe();
}
@ -57,12 +63,24 @@ class _EightWaySwipeDetectorState extends State<EightWaySwipeDetector> {
@override
Widget build(BuildContext context) {
return GestureDetector(
return TrackpadListener(
scrollSensitivity: 70,
onScroll: _trackpadSwipe,
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onPanStart: _handleSwipeStart,
onPanUpdate: _handleSwipeUpdate,
onPanCancel: _resetSwipe,
onPanEnd: _handleSwipeEnd,
child: widget.child);
supportedDevices: const {
// Purposely omitting PointerDeviceKind.trackpad.
PointerDeviceKind.mouse,
PointerDeviceKind.stylus,
PointerDeviceKind.touch,
PointerDeviceKind.unknown,
},
child: widget.child,
),
);
}
}

3
lib/ui/common/controls/scroll_decorator.dart
View File

@ -1,4 +1,5 @@
import 'package:wonders/common_libs.dart';
import 'package:wonders/ui/common/ignore_pointer.dart';
/// Easily add visual decorations to a scrolling widget based on the state of its controller.
class ScrollDecorator extends StatefulWidget {
@ -64,7 +65,7 @@ class ScrollDecorator extends StatefulWidget {
bgBuilder = null;
fgBuilder = (controller) {
final double ratio = controller.hasClients ? min(1, controller.position.extentBefore / 60) : 0;
return IgnorePointer(
return IgnorePointerAndSemantics(
child: Container(
height: 24,
decoration: BoxDecoration(

69
lib/ui/common/controls/trackpad_listener.dart Normal file
View File

@ -0,0 +1,69 @@
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class TrackpadListener extends StatefulWidget {
final Widget? child;
final double scrollSensitivity;
final ValueChanged<Offset>? onScroll;
const TrackpadListener({
super.key,
this.child,
this.scrollSensitivity = 100,
this.onScroll,
});
@override
State<TrackpadListener> createState() => _TrackpadListenerState();
}
class _TrackpadListenerState extends State<TrackpadListener> {
Offset _scrollOffset = Offset.zero;
void _handleTrackpadEvent(PointerSignalEvent event) {
// Directly process the event here.
if (event is PointerScrollEvent && event.kind == PointerDeviceKind.trackpad) {
Offset newScroll = _scrollOffset + event.scrollDelta;
newScroll = Offset(
newScroll.dx.clamp(-widget.scrollSensitivity, widget.scrollSensitivity),
newScroll.dy.clamp(-widget.scrollSensitivity, widget.scrollSensitivity),
);
_scrollOffset = newScroll;
_update();
}
}
void _update() {
Offset directionScroll = Offset.zero;
double sensitivity = widget.scrollSensitivity;
if (_scrollOffset.dy >= sensitivity) {
// Scroll down
_scrollOffset += Offset(0.0, -sensitivity);
directionScroll += Offset(0.0, -1.0);
} else if (_scrollOffset.dy <= -sensitivity) {
// Scroll up
_scrollOffset += Offset(0.0, sensitivity);
directionScroll += Offset(0.0, 1.0);
}
if (_scrollOffset.dx >= sensitivity) {
// Scroll left
_scrollOffset += Offset(-sensitivity, 0.0);
directionScroll += Offset(-1.0, 0.0);
} else if (_scrollOffset.dx <= -sensitivity) {
// Scroll right
_scrollOffset += Offset(sensitivity, 0.0);
directionScroll += Offset(1.0, 0.0);
}
if (directionScroll != Offset.zero) {
widget.onScroll?.call(directionScroll);
}
}
@override
Widget build(BuildContext context) {
return Listener(
onPointerSignal: _handleTrackpadEvent,
child: widget.child,
);
}
}

33
lib/ui/common/gradient_container.dart
View File

@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:wonders/ui/common/ignore_pointer.dart';
class GradientContainer extends StatelessWidget {
const GradientContainer(this.colors, this.stops,
@ -24,23 +25,23 @@ class GradientContainer extends StatelessWidget {
@override
Widget build(BuildContext context) => IgnorePointer(
child: Container(
width: width,
height: height,
alignment: alignment,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: begin ?? Alignment.centerLeft,
end: end ?? Alignment.centerRight,
colors: colors,
stops: stops,
),
backgroundBlendMode: blendMode,
borderRadius: borderRadius,
),
child: child,
child: Container(
width: width,
height: height,
alignment: alignment,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: begin ?? Alignment.centerLeft,
end: end ?? Alignment.centerRight,
colors: colors,
stops: stops,
),
);
backgroundBlendMode: blendMode,
borderRadius: borderRadius,
),
child: child,
),
);
}
class HzGradient extends GradientContainer {

32
lib/ui/common/ignore_pointer.dart Normal file
View File

@ -0,0 +1,32 @@
import 'package:flutter/rendering.dart';
import 'package:wonders/common_libs.dart';
class IgnorePointerKeepSemantics extends SingleChildRenderObjectWidget {
const IgnorePointerKeepSemantics({super.key, super.child});
@override
RenderIgnorePointerKeepSemantics createRenderObject(BuildContext context) {
return RenderIgnorePointerKeepSemantics();
}
}
class RenderIgnorePointerKeepSemantics extends RenderProxyBox {
RenderIgnorePointerKeepSemantics();
@override
bool hitTest(BoxHitTestResult result, { required Offset position }) => false;
}
class IgnorePointerAndSemantics extends StatelessWidget {
final Widget child;
const IgnorePointerAndSemantics({super.key, required this.child});
@override
Widget build(BuildContext context) {
return ExcludeSemantics(
child: IgnorePointer(
child: child
)
);
}
}

4
lib/ui/common/modals/fullscreen_url_img_viewer.dart
View File

@ -53,7 +53,7 @@ class _FullscreenUrlImgViewerState extends State<FullscreenUrlImgViewer> {
void _animateToPage(int page) {
if (page >= 0 || page < widget.urls.length) {
_controller.animateToPage(page, duration: 300.ms, curve: Curves.easeOut);
_controller.animateToPage(page, duration: $styles.times.fast, curve: Curves.easeOut);
}
}
@ -102,7 +102,7 @@ class _FullscreenUrlImgViewerState extends State<FullscreenUrlImgViewer> {
CircleIconBtn(
icon: AppIcons.prev,
onPressed: page == 0 ? null : () => _animateToPage(page - 1),
semanticLabel: $strings.semanticsNext(''),
semanticLabel: $strings.semanticsPrevious(''),
),
Gap($styles.insets.xs),
CircleIconBtn(

6
lib/ui/common/utils/duration_utils.dart Normal file
View File

@ -0,0 +1,6 @@
import 'package:wonders/common_libs.dart';
extension DurationExtensions on int {
Duration get delayMs => $styles.disableAnimations ? 0.ms : Duration(milliseconds: this);
Duration get animateMs => $styles.disableAnimations ? 1.ms : Duration(milliseconds: this);
}

1
lib/ui/common/wonderous_logo.dart
View File

@ -9,6 +9,7 @@ class WonderousLogo extends StatelessWidget {
@override
Widget build(BuildContext context) => Image.asset(
ImagePaths.appLogoPlain,
excludeFromSemantics: true,
fit: BoxFit.cover,
width: width,
filterQuality: FilterQuality.high,

2
lib/ui/screens/artifact/artifact_carousel/artifact_carousel_screen.dart
View File

@ -1,10 +1,12 @@
import 'dart:ui';
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/common/animate_utils.dart';
import 'package:wonders/logic/data/highlight_data.dart';
import 'package:wonders/ui/common/app_icons.dart';
import 'package:wonders/ui/common/controls/app_header.dart';
import 'package:wonders/ui/common/controls/app_page_indicator.dart';
import 'package:wonders/ui/common/ignore_pointer.dart';
import 'package:wonders/ui/common/static_text_scale.dart';
part 'widgets/_blurred_image_bg.dart';

5
lib/ui/screens/artifact/artifact_carousel/widgets/_bottom_text_content.dart
View File

@ -26,8 +26,7 @@ class _BottomTextContent extends StatelessWidget {
Gap($styles.insets.md),
Column(
children: [
IgnorePointer(
ignoringSemantics: false,
IgnorePointerKeepSemantics(
child: Semantics(
button: true,
onIncrease: () => state._handleArtifactTap(_currentPage + 1),
@ -58,7 +57,7 @@ class _BottomTextContent extends StatelessWidget {
),
]
],
).animate(key: ValueKey(artifact.artifactId)).fadeIn(),
).maybeAnimate(key: ValueKey(artifact.artifactId)).fadeIn(),
),
),
],

4
lib/ui/screens/artifact/artifact_details/artifact_details_screen.dart
View File

@ -1,10 +1,12 @@
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/common/animate_utils.dart';
import 'package:wonders/logic/data/artifact_data.dart';
import 'package:wonders/ui/common/compass_divider.dart';
import 'package:wonders/ui/common/controls/app_header.dart';
import 'package:wonders/ui/common/controls/app_loading_indicator.dart';
import 'package:wonders/ui/common/gradient_container.dart';
import 'package:wonders/ui/common/modals/fullscreen_url_img_viewer.dart';
import 'package:wonders/ui/common/utils/duration_utils.dart';
part 'widgets/_artifact_image_btn.dart';
part 'widgets/_info_column.dart';
@ -85,6 +87,6 @@ class _ArtifactDetailsScreenState extends State<ArtifactDetailsScreen> {
),
),
],
).animate().fadeIn();
).maybeAnimate().fadeIn();
}
}

104
lib/ui/screens/artifact/artifact_details/widgets/_info_column.dart
View File

@ -9,59 +9,61 @@ class _InfoColumn extends StatelessWidget {
return Padding(
padding: EdgeInsets.symmetric(horizontal: $styles.insets.lg),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Gap($styles.insets.xl),
if (data.culture.isNotEmpty) ...[
Text(
data.culture.toUpperCase(),
style: $styles.text.titleFont.copyWith(color: $styles.colors.accent1),
).animate().fade(delay: 150.ms, duration: 600.ms),
Gap($styles.insets.xs),
],
Semantics(
header: true,
child: Text(
data.title,
textAlign: TextAlign.center,
style: $styles.text.h2.copyWith(color: $styles.colors.offWhite, height: 1.2),
maxLines: 5,
overflow: TextOverflow.ellipsis,
).animate().fade(delay: 250.ms, duration: 600.ms),
),
Gap($styles.insets.lg),
Animate().toggle(
delay: 500.ms,
builder: (_, value, __) {
return CompassDivider(isExpanded: !value, duration: $styles.times.med);
}),
Gap($styles.insets.lg),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...[
_InfoRow($strings.artifactDetailsLabelDate, data.date),
_InfoRow($strings.artifactDetailsLabelPeriod, data.period),
_InfoRow($strings.artifactDetailsLabelGeography, data.country),
_InfoRow($strings.artifactDetailsLabelMedium, data.medium),
_InfoRow($strings.artifactDetailsLabelDimension, data.dimension),
_InfoRow($strings.artifactDetailsLabelClassification, data.classification),
]
.animate(interval: 100.ms)
.fadeIn(delay: 600.ms, duration: $styles.times.med)
.slide(begin: Offset(0.2, 0), curve: Curves.easeOut),
child: Focus(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Gap($styles.insets.xl),
if (data.culture.isNotEmpty) ...[
Text(
data.culture.toUpperCase(),
style: $styles.text.titleFont.copyWith(color: $styles.colors.accent1),
).maybeAnimate().fade(delay: 150.delayMs, duration: 600.animateMs),
Gap($styles.insets.xs),
],
),
Gap($styles.insets.md),
Text(
$strings.homeMenuAboutMet,
style: $styles.text.caption.copyWith(color: $styles.colors.accent2),
).animate(delay: 1.5.seconds).fadeIn().slide(begin: Offset(0.2, 0), curve: Curves.easeOut),
Gap($styles.insets.offset),
],
Semantics(
header: true,
child: Text(
data.title,
textAlign: TextAlign.center,
style: $styles.text.h2.copyWith(color: $styles.colors.offWhite, height: 1.2),
maxLines: 5,
overflow: TextOverflow.ellipsis,
).maybeAnimate().fade(delay: 250.delayMs, duration: 600.animateMs),
),
Gap($styles.insets.lg),
Animate().toggle(
delay: 500.delayMs,
builder: (_, value, __) {
return CompassDivider(isExpanded: !value, duration: $styles.times.med);
}),
Gap($styles.insets.lg),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
...[
_InfoRow($strings.artifactDetailsLabelDate, data.date),
_InfoRow($strings.artifactDetailsLabelPeriod, data.period),
_InfoRow($strings.artifactDetailsLabelGeography, data.country),
_InfoRow($strings.artifactDetailsLabelMedium, data.medium),
_InfoRow($strings.artifactDetailsLabelDimension, data.dimension),
_InfoRow($strings.artifactDetailsLabelClassification, data.classification),
]
.animate(interval: 100.delayMs)
.fadeIn(delay: 600.delayMs, duration: $styles.times.med)
.slide(begin: Offset(0.2, 0), curve: Curves.easeOut),
],
),
Gap($styles.insets.md),
Text(
$strings.homeMenuAboutMet,
style: $styles.text.caption.copyWith(color: $styles.colors.accent2),
).maybeAnimate(delay: 1500.delayMs).fadeIn().slide(begin: Offset(0.2, 0), curve: Curves.easeOut),
Gap($styles.insets.offset),
],
),
),
),
)
);
}
}

163
lib/ui/screens/artifact/artifact_search/time_range_selector/expanding_time_range_selector.dart
View File

@ -133,34 +133,42 @@ class _OpenedTimeRange extends StatelessWidget {
final TimeRangePainter painter;
final void Function() onClose;
List<Widget> _buildChineseDateLayout(TextStyle headingTextStyle, TextStyle captionTextStyle, int startYr, int endYr) {
return [
Text(StringUtils.getYrSuffix(startYr), style: captionTextStyle),
Gap($styles.insets.xxs),
Text(startYr.abs().toString(), style: headingTextStyle),
Text($strings.year, style: captionTextStyle),
Gap($styles.insets.xs),
Text('~', style: captionTextStyle),
Gap($styles.insets.xs),
Text(StringUtils.getYrSuffix(endYr.round()), style: captionTextStyle),
Gap($styles.insets.xxs),
Text(endYr.abs().toString(), style: headingTextStyle),
Text($strings.year, style: captionTextStyle),
];
Widget _buildChineseDateLayout(TextStyle headingTextStyle, TextStyle captionTextStyle, int startYr, int endYr) {
return MergeSemantics(
child: Row(
children: [
Text(StringUtils.getYrSuffix(startYr), style: captionTextStyle),
Gap($styles.insets.xxs),
Text(startYr.abs().toString(), style: headingTextStyle),
Text($strings.year, style: captionTextStyle),
Gap($styles.insets.xs),
Text('~', style: captionTextStyle),
Gap($styles.insets.xs),
Text(StringUtils.getYrSuffix(endYr.round()), style: captionTextStyle),
Gap($styles.insets.xxs),
Text(endYr.abs().toString(), style: headingTextStyle),
Text($strings.year, style: captionTextStyle),
],
),
);
}
List<Widget> _buildDefaultDateLayout(TextStyle headingTextStyle, TextStyle captionTextStyle, int startYr, int endYr) {
return [
Text(startYr.abs().toString(), style: headingTextStyle),
Gap($styles.insets.xxs),
Text(StringUtils.getYrSuffix(startYr), style: captionTextStyle),
Gap($styles.insets.xs),
Text('—', style: captionTextStyle),
Gap($styles.insets.xs),
Text(endYr.abs().toString(), style: headingTextStyle),
Gap($styles.insets.xxs),
Text(StringUtils.getYrSuffix(endYr.round()), style: captionTextStyle),
];
Widget _buildDefaultDateLayout(TextStyle headingTextStyle, TextStyle captionTextStyle, int startYr, int endYr) {
return MergeSemantics(
child: Row(
children: [
Text(startYr.abs().toString(), style: headingTextStyle),
Gap($styles.insets.xxs),
Text(StringUtils.getYrSuffix(startYr), style: captionTextStyle),
Gap($styles.insets.xs),
Text('—', style: captionTextStyle),
Gap($styles.insets.xs),
Text(endYr.abs().toString(), style: headingTextStyle),
Gap($styles.insets.xxs),
Text(StringUtils.getYrSuffix(endYr.round()), style: captionTextStyle),
],
),
);
}
@override
@ -181,16 +189,16 @@ class _OpenedTimeRange extends StatelessWidget {
Gap($styles.insets.xl),
Spacer(),
if (localeLogic.strings.localeName == 'zh') ...{
..._buildChineseDateLayout(headingTextStyle, captionTextStyle, startYr, endYr),
_buildChineseDateLayout(headingTextStyle, captionTextStyle, startYr, endYr),
} else ...{
..._buildDefaultDateLayout(headingTextStyle, captionTextStyle, startYr, endYr),
_buildDefaultDateLayout(headingTextStyle, captionTextStyle, startYr, endYr),
},
Spacer(),
SizedBox(
width: $styles.insets.xl,
child: AppBtn.from(
onPressed: onClose,
semanticLabel: $strings.expandingTimeSelectorSemanticSelector,
semanticLabel: $strings.circleButtonsSemanticClose,
enableFeedback: false, // handled when panelController changes.
icon: AppIcons.close,
iconSize: 20,
@ -206,60 +214,67 @@ class _OpenedTimeRange extends StatelessWidget {
// Timeframe slider
SizedBox(
height: $styles.insets.lg * 2,
child: Stack(children: [
// grid lines:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular($styles.corners.md),
color: Color.lerp($styles.colors.black, Colors.black, 0.2),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: timelineGrid,
),
),
// results visualization:
Positioned.fill(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: RangeSelector.handleWidth),
child: RepaintBoundary(
child: CustomPaint(painter: painter),
child: Stack(
children: [
// grid lines:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular($styles.corners.md),
color: Color.lerp($styles.colors.black, Colors.black, 0.2),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: timelineGrid,
),
),
),
// wonder minimap:
Positioned.fill(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: RangeSelector.handleWidth, vertical: 12),
child: WondersTimelineBuilder(
crossAxisGap: 6,
minSize: 16,
selectedWonders: [wonder.type],
timelineBuilder: (_, __, sel) => Container(
decoration: BoxDecoration(
color: $styles.colors.offWhite.withOpacity(sel ? 0.75 : 0.25),
borderRadius: BorderRadius.circular(999),
// results visualization:
Positioned.fill(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: RangeSelector.handleWidth),
child: RepaintBoundary(
child: CustomPaint(painter: painter),
),
),
),
// wonder minimap:
Positioned.fill(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: RangeSelector.handleWidth, vertical: 12),
child: WondersTimelineBuilder(
crossAxisGap: 6,
minSize: 16,
selectedWonders: [wonder.type],
timelineBuilder: (_, __, sel) => Container(
decoration: BoxDecoration(
color: $styles.colors.offWhite.withOpacity(sel ? 0.75 : 0.25),
borderRadius: BorderRadius.circular(999),
),
),
),
),
),
),
// Time slider itself
Positioned.fill(
child: RangeSelector(
key: ValueKey('RangeSelectorIsWonderTime'),
min: wondersLogic.timelineStartYear * 1.0,
max: wondersLogic.timelineEndYear * 1.0,
minDelta: 500,
start: startYear,
end: endYear,
onUpdated: onChange,
// Time slider itself
Positioned.fill(
child: MergeSemantics(
child: Semantics(
label: $strings.bottomScrubberSemanticTimeline,
child: RangeSelector(
key: ValueKey('RangeSelectorIsWonderTime'),
min: wondersLogic.timelineStartYear * 1.0,
max: wondersLogic.timelineEndYear * 1.0,
minDelta: 500,
start: startYear,
end: endYear,
onUpdated: onChange,
),
),
),
),
),
]),
],
),
),
Gap(safeBottom),

9
lib/ui/screens/artifact/artifact_search/widgets/_search_input.dart
View File

@ -1,6 +1,7 @@
part of '../artifact_search_screen.dart';
/// Autopopulating textfield used for searching for Artifacts by name.
const double _inputWidth = 400;
class _SearchInput extends StatelessWidget {
const _SearchInput({super.key, required this.onSubmit, required this.wonder});
final void Function(String) onSubmit;
@ -49,6 +50,7 @@ class _SearchInput extends StatelessWidget {
child: Container(
margin: EdgeInsets.only(top: $styles.insets.xxs),
width: constraints.maxWidth,
constraints: BoxConstraints(maxWidth: _inputWidth),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
@ -120,6 +122,7 @@ class _SearchInput extends StatelessWidget {
Widget _buildInput(BuildContext context, TextEditingController textController, FocusNode focusNode, _) {
Color captionColor = $styles.colors.caption;
return Container(
constraints: BoxConstraints(maxWidth: _inputWidth),
height: $styles.insets.xl,
decoration: BoxDecoration(
color: $styles.colors.offWhite,
@ -128,19 +131,19 @@ class _SearchInput extends StatelessWidget {
child: Row(
children: [
Gap($styles.insets.xs * 1.5),
Icon(Icons.search, color: $styles.colors.caption),
Icon(Icons.search, color: captionColor),
Expanded(
child: TextField(
onSubmitted: onSubmit,
controller: textController,
focusNode: focusNode,
style: TextStyle(color: captionColor),
style: TextStyle(color: $styles.colors.greyStrong),
textAlignVertical: TextAlignVertical.top,
decoration: InputDecoration(
isDense: true,
contentPadding: EdgeInsets.all($styles.insets.xs),
labelStyle: TextStyle(color: captionColor),
hintStyle: TextStyle(color: captionColor.withOpacity(0.5)),
hintStyle: TextStyle(color: $styles.colors.body),
prefixStyle: TextStyle(color: captionColor),
focusedBorder: OutlineInputBorder(borderSide: BorderSide.none),
enabledBorder: UnderlineInputBorder(borderSide: BorderSide.none),

4
lib/ui/screens/collectible_found/collectible_found_screen.dart
View File

@ -1,10 +1,12 @@
import 'package:particle_field/particle_field.dart';
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/common/animate_utils.dart';
import 'package:wonders/logic/data/collectible_data.dart';
import 'package:wonders/ui/common/app_backdrop.dart';
import 'package:wonders/ui/common/centered_box.dart';
import 'package:wonders/ui/common/controls/app_header.dart';
import 'package:wonders/ui/common/pop_navigator_underlay.dart';
import 'package:wonders/ui/common/utils/duration_utils.dart';
part 'widgets/_animated_ribbon.dart';
part 'widgets/_celebration_particles.dart';
@ -21,7 +23,7 @@ class CollectibleFoundScreen extends StatelessWidget {
Widget build(BuildContext context) {
return RepaintBoundary(
child: _buildIntro(context).animate().swap(
delay: $styles.times.fast * 3.5,
delay: 1050.animateMs,
builder: (_, __) => _buildDetail(context),
),
);

4
lib/ui/screens/collectible_found/widgets/_animated_ribbon.dart
View File

@ -38,7 +38,7 @@ class _AnimatedRibbon extends StatelessWidget {
if (flip) end = Transform.scale(scaleX: -1, child: end);
double m = flip ? 1 : -1;
return end
.animate()
.move(begin: Offset(m * 8, 2), end: Offset(m * 32, 10), duration: 400.ms, curve: Curves.easeOut);
.maybeAnimate()
.move(begin: Offset(m * 8, 2), end: Offset(m * 32, 10), duration: 400.animateMs, curve: Curves.easeOut);
}
}

4
lib/ui/screens/collection/collection_screen.dart
View File

@ -3,11 +3,13 @@ import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/collectibles_logic.dart';
import 'package:wonders/logic/common/animate_utils.dart';
import 'package:wonders/logic/data/collectible_data.dart';
import 'package:wonders/logic/data/wonder_data.dart';
import 'package:wonders/ui/common/centered_box.dart';
import 'package:wonders/ui/common/controls/app_header.dart';
import 'package:wonders/ui/common/modals/app_modals.dart';
import 'package:wonders/ui/common/utils/duration_utils.dart';
part 'widgets/_collectible_image.dart';
part 'widgets/_collection_footer.dart';
@ -38,7 +40,7 @@ class _CollectionScreenState extends State<CollectionScreen> with GetItStateMixi
void _scrollToTarget([bool animate = true]) {
if (_scrollKey.currentContext != null) {
Scrollable.ensureVisible(_scrollKey.currentContext!, alignment: 0.15, duration: animate ? 300.ms : 0.ms);
Scrollable.ensureVisible(_scrollKey.currentContext!, alignment: 0.15, duration: (animate ? 300 : 0).animateMs);
}
}

2
lib/ui/screens/collection/widgets/_collection_footer.dart
View File

@ -69,7 +69,7 @@ class _CollectionFooter extends StatelessWidget {
color: $styles.colors.accent1,
borderRadius: BorderRadius.circular(1000),
),
).animate().fade(duration: 1500.ms, curve: Curves.easeOutExpo).custom(
).maybeAnimate().fade(duration: 1500.animateMs, curve: Curves.easeOutExpo).custom(
builder: (_, m, child) => FractionallySizedBox(
alignment: Alignment.centerLeft,
widthFactor: m * count / total,

2
lib/ui/screens/collection/widgets/_collection_list_card.dart
View File

@ -10,7 +10,7 @@ class _CollectionListCard extends StatelessWidget with GetItMixin {
void _showDetails(BuildContext context, CollectibleData collectible) {
context.go(ScreenPaths.artifact(collectible.artifactId));
Future.delayed(300.ms).then((_) => collectiblesLogic.setState(collectible.id, CollectibleState.explored));
Future.delayed(300.delayMs).then((_) => collectiblesLogic.setState(collectible.id, CollectibleState.explored));
}
@override

203
lib/ui/screens/editorial/editorial_screen.dart
View File

@ -5,6 +5,7 @@ import 'package:flutter/rendering.dart';
import 'package:flutter_circular_text/circular_text.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/common/animate_utils.dart';
import 'package:wonders/logic/common/platform_info.dart';
import 'package:wonders/logic/common/string_utils.dart';
import 'package:wonders/logic/data/wonder_data.dart';
@ -12,16 +13,19 @@ import 'package:wonders/ui/common/app_icons.dart';
import 'package:wonders/ui/common/blend_mask.dart';
import 'package:wonders/ui/common/centered_box.dart';
import 'package:wonders/ui/common/compass_divider.dart';
import 'package:wonders/ui/common/controls/trackpad_listener.dart';
import 'package:wonders/ui/common/curved_clippers.dart';
import 'package:wonders/ui/common/fullscreen_keyboard_list_scroller.dart';
import 'package:wonders/ui/common/google_maps_marker.dart';
import 'package:wonders/ui/common/gradient_container.dart';
import 'package:wonders/ui/common/hidden_collectible.dart';
import 'package:wonders/ui/common/ignore_pointer.dart';
import 'package:wonders/ui/common/pop_router_on_over_scroll.dart';
import 'package:wonders/ui/common/scaling_list_item.dart';
import 'package:wonders/ui/common/static_text_scale.dart';
import 'package:wonders/ui/common/themed_text.dart';
import 'package:wonders/ui/common/utils/context_utils.dart';
import 'package:wonders/ui/common/utils/duration_utils.dart';
import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration.dart';
import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration_config.dart';
import 'package:wonders/ui/wonder_illustrations/common/wonder_title_text.dart';
@ -63,6 +67,13 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
_scrollPos.value = _scroller.position.pixels;
}
void _handleTrackpadScroll(Offset direction) {
// Trackpad swipe up. Return to home if at the top.
if (_scroller.position.pixels == 0 && direction.dy > 0) {
_handleBackPressed();
}
}
void _handleBackPressed() => context.go(ScreenPaths.home);
@override
@ -79,115 +90,119 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
controller: _scroller,
child: ColoredBox(
color: $styles.colors.offWhite,
child: Stack(
children: [
/// Background
Positioned.fill(
child: ColoredBox(color: widget.data.type.bgColor),
),
/// Top Illustration - Sits underneath the scrolling content, fades out as it scrolls
SizedBox(
height: illustrationHeight,
child: ValueListenableBuilder<double>(
valueListenable: _scrollPos,
builder: (_, value, child) {
// get some value between 0 and 1, based on the amt scrolled
double opacity = (1 - value / 700).clamp(0, 1);
return Opacity(opacity: opacity, child: child);
},
// This is due to a bug: https://github.com/flutter/flutter/issues/101872
child: RepaintBoundary(
child: _TopIllustration(
widget.data.type,
// Polish: Inject the content padding into the illustration as an offset, so it can center itself relative to the content
// this allows the background to extend underneath the vertical side nav when it has rounded corners.
fgOffset: Offset(widget.contentPadding.left / 2, 0),
)),
child: TrackpadListener(
onScroll: _handleTrackpadScroll,
scrollSensitivity: 120,
child: Stack(
children: [
/// Background
Positioned.fill(
child: ColoredBox(color: widget.data.type.bgColor),
),
),
/// Scrolling content - Includes an invisible gap at the top, and then scrolls over the illustration
TopCenter(
child: Padding(
padding: widget.contentPadding,
child: SizedBox(
child: FocusTraversalGroup(
child: FullscreenKeyboardListScroller(
scrollController: _scroller,
child: CustomScrollView(
controller: _scroller,
scrollBehavior: ScrollConfiguration.of(context).copyWith(),
key: PageStorageKey('editorial'),
slivers: [
/// Invisible padding at the top of the list, so the illustration shows through the btm
SliverToBoxAdapter(
child: SizedBox(height: illustrationHeight),
),
/// Top Illustration - Sits underneath the scrolling content, fades out as it scrolls
SizedBox(
height: illustrationHeight,
child: ValueListenableBuilder<double>(
valueListenable: _scrollPos,
builder: (_, value, child) {
// get some value between 0 and 1, based on the amt scrolled
double opacity = (1 - value / 700).clamp(0, 1);
return Opacity(opacity: opacity, child: child);
},
// This is due to a bug: https://github.com/flutter/flutter/issues/101872
child: RepaintBoundary(
child: _TopIllustration(
widget.data.type,
// Polish: Inject the content padding into the illustration as an offset, so it can center itself relative to the content
// this allows the background to extend underneath the vertical side nav when it has rounded corners.
fgOffset: Offset(widget.contentPadding.left / 2, 0),
)),
),
),
/// Text content, animates itself to hide behind the app bar as it scrolls up
SliverToBoxAdapter(
child: ValueListenableBuilder<double>(
valueListenable: _scrollPos,
builder: (_, value, child) {
double offsetAmt = max(0, value * .3);
double opacity = (1 - offsetAmt / 150).clamp(0, 1);
return Transform.translate(
offset: Offset(0, offsetAmt),
child: Opacity(opacity: opacity, child: child),
);
},
child: _TitleText(widget.data, scroller: _scroller),
/// Scrolling content - Includes an invisible gap at the top, and then scrolls over the illustration
TopCenter(
child: Padding(
padding: widget.contentPadding,
child: SizedBox(
child: FocusTraversalGroup(
child: FullscreenKeyboardListScroller(
scrollController: _scroller,
child: CustomScrollView(
controller: _scroller,
scrollBehavior: ScrollConfiguration.of(context).copyWith(),
key: PageStorageKey('editorial'),
slivers: [
/// Invisible padding at the top of the list, so the illustration shows through the btm
SliverToBoxAdapter(
child: SizedBox(height: illustrationHeight),
),
),
/// Collapsing App bar, pins to the top of the list
SliverAppBar(
pinned: true,
collapsedHeight: minAppBarHeight,
toolbarHeight: minAppBarHeight,
expandedHeight: maxAppBarHeight,
backgroundColor: Colors.transparent,
elevation: 0,
leading: SizedBox.shrink(),
flexibleSpace: SizedBox.expand(
child: _AppBar(
widget.data.type,
scrollPos: _scrollPos,
sectionIndex: _sectionIndex,
/// Text content, animates itself to hide behind the app bar as it scrolls up
SliverToBoxAdapter(
child: ValueListenableBuilder<double>(
valueListenable: _scrollPos,
builder: (_, value, child) {
double offsetAmt = max(0, value * .3);
double opacity = (1 - offsetAmt / 150).clamp(0, 1);
return Transform.translate(
offset: Offset(0, offsetAmt),
child: Opacity(opacity: opacity, child: child),
);
},
child: _TitleText(widget.data, scroller: _scroller),
),
),
),
/// Editorial content (text and images)
_ScrollingContent(widget.data, scrollPos: _scrollPos, sectionNotifier: _sectionIndex),
],
/// Collapsing App bar, pins to the top of the list
SliverAppBar(
pinned: true,
collapsedHeight: minAppBarHeight,
toolbarHeight: minAppBarHeight,
expandedHeight: maxAppBarHeight,
backgroundColor: Colors.transparent,
elevation: 0,
leading: SizedBox.shrink(),
flexibleSpace: SizedBox.expand(
child: _AppBar(
widget.data.type,
scrollPos: _scrollPos,
sectionIndex: _sectionIndex,
),
),
),
/// Editorial content (text and images)
_ScrollingContent(widget.data, scrollPos: _scrollPos, sectionNotifier: _sectionIndex),
],
),
),
),
),
),
),
),
/// Home Btn
AnimatedBuilder(
animation: _scroller,
builder: (_, child) {
return AnimatedOpacity(
opacity: _scrollPos.value > 0 ? 0 : 1,
duration: $styles.times.med,
child: child,
);
},
child: Align(
alignment: backBtnAlign,
child: Padding(
padding: EdgeInsets.all($styles.insets.sm),
child: BackBtn(icon: AppIcons.north, onPressed: _handleBackPressed),
/// Home Btn
AnimatedBuilder(
animation: _scroller,
builder: (_, child) {
return AnimatedOpacity(
opacity: _scrollPos.value > 0 ? 0 : 1,
duration: $styles.times.med,
child: child,
);
},
child: Align(
alignment: backBtnAlign,
child: Padding(
padding: EdgeInsets.all($styles.insets.sm),
child: BackBtn(icon: AppIcons.north, onPressed: _handleBackPressed),
),
),
),
)
],
)
],
),
),
),
);

2
lib/ui/screens/editorial/widgets/_app_bar.dart
View File

@ -67,7 +67,7 @@ class _AppBar extends StatelessWidget {
);
},
),
).animate(delay: $styles.times.pageTransition + 500.ms).fadeIn(duration: $styles.times.slow),
).maybeAnimate(delay: $styles.times.pageTransition + 500.delayMs).fadeIn(duration: $styles.times.slow),
),
),
),

30
lib/ui/screens/editorial/widgets/_callout.dart
View File

@ -6,20 +6,22 @@ class _Callout extends StatelessWidget {
const _Callout({super.key, required this.text});
@override
Widget build(BuildContext context) {
return IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(color: $styles.colors.accent1, width: 1),
Gap($styles.insets.sm),
Expanded(
child: Text(
text,
style: $styles.text.callout,
),
)
],
),
return Focus(
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(color: $styles.colors.accent1, width: 1),
Gap($styles.insets.sm),
Expanded(
child: Text(
text,
style: $styles.text.callout,
),
)
],
),
)
);
}
}

4
lib/ui/screens/editorial/widgets/_circular_title_bar.dart
View File

@ -34,7 +34,7 @@ class _CircularTitleBar extends StatelessWidget {
BottomCenter(
child: Padding(
padding: EdgeInsets.only(bottom: 20),
child: Image.asset('${ImagePaths.common}/${icons[index]}').animate(key: ValueKey(index)).fade().scale(
child: Image.asset('${ImagePaths.common}/${icons[index]}').maybeAnimate(key: ValueKey(index)).fade().scale(
begin: Offset(.5, .5), end: Offset(1, 1), curve: Curves.easeOutBack, duration: $styles.times.med),
),
),
@ -133,7 +133,7 @@ class _AnimatedCircleWithTextState extends State<_AnimatedCircleWithText> with S
Widget _buildCircularText(String title) {
final textStyle = $styles.text.monoTitleFont.copyWith(
fontSize: 22 * $styles.scale,
color: $styles.colors.accent1,
color: $styles.colors.accent3,
);
return CircularText(
position: CircularTextPosition.inside,

4
lib/ui/screens/editorial/widgets/_large_simple_quote.dart
View File

@ -18,7 +18,7 @@ class _LargeSimpleQuote extends StatelessWidget {
child: Text(
'“',
style: $styles.text.quote1.copyWith(
color: $styles.colors.accent1,
color: $styles.colors.accent3,
fontSize: 90 * $styles.scale,
height: .7,
),
@ -32,7 +32,7 @@ class _LargeSimpleQuote extends StatelessWidget {
Gap($styles.insets.md),
Text(
'- $author',
style: $styles.text.quote2Sub.copyWith(color: $styles.colors.accent1),
style: $styles.text.quote2Sub.copyWith(color: $styles.colors.accent3),
),
],
),

74
lib/ui/screens/editorial/widgets/_scrolling_content.dart
View File

@ -19,45 +19,45 @@ class _ScrollingContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
Widget buildText(String value) => Focus(child: Text(_fixNewlines(value), style: $styles.text.body));
Widget buildDropCapText(String value) {
Widget buildText(String value, bool useDropCaps) {
final bool skipCaps = !localeLogic.isEnglish || !useDropCaps;
final TextStyle dropStyle = $styles.text.dropCase;
final TextStyle bodyStyle = $styles.text.body;
final String dropChar = value.substring(0, 1);
final textScale = MediaQuery.of(context).textScaleFactor;
final double dropCapWidth = StringUtils.measure(dropChar, dropStyle).width * textScale;
final bool skipCaps = !localeLogic.isEnglish;
return Semantics(
label: value,
child: ExcludeSemantics(
child: !skipCaps
? DropCapText(
_fixNewlines(value).substring(1),
dropCap: DropCap(
width: dropCapWidth,
height: $styles.text.body.fontSize! * $styles.text.body.height! * 2,
child: Transform.translate(
offset: Offset(0, bodyStyle.fontSize! * (bodyStyle.height! - 1) - 2),
child: Text(
dropChar,
overflow: TextOverflow.visible,
style: $styles.text.dropCase.copyWith(
color: $styles.colors.accent1,
height: 1,
return Focus(
child: Semantics(
label: value,
child: ExcludeSemantics(
child: skipCaps
? Text(_fixNewlines(value), style: bodyStyle )
: DropCapText(
_fixNewlines(value).substring(1),
dropCap: DropCap(
width: dropCapWidth,
height: $styles.text.body.fontSize! * $styles.text.body.height! * 2,
child: Transform.translate(
offset: Offset(0, bodyStyle.fontSize! * (bodyStyle.height! - 1) - 2),
child: Text(
dropChar,
overflow: TextOverflow.visible,
style: $styles.text.dropCase.copyWith(
color: $styles.colors.accent3,
height: 1,
),
),
),
),
),
style: $styles.text.body,
dropCapPadding: EdgeInsets.only(right: 6),
dropCapStyle: $styles.text.dropCase.copyWith(
color: $styles.colors.accent1,
height: 1,
),
)
: Text(value, style: bodyStyle),
),
style: $styles.text.body,
dropCapPadding: EdgeInsets.only(right: 6),
dropCapStyle: $styles.text.dropCase.copyWith(
color: $styles.colors.accent3,
height: 1,
),
)
),
)
);
}
@ -93,7 +93,7 @@ class _ScrollingContent extends StatelessWidget {
Center(child: buildHiddenCollectible(slot: 0)),
/// History 1
buildDropCapText(data.historyInfo1),
buildText(data.historyInfo1, true),
/// Quote1
_CollapsingPullQuoteImage(data: data, scrollPos: scrollPos),
@ -103,11 +103,11 @@ class _ScrollingContent extends StatelessWidget {
_Callout(text: data.callout1),
/// History 2
buildText(data.historyInfo2),
buildText(data.historyInfo2, false),
_SectionDivider(scrollPos, sectionNotifier, index: 1),
/// Construction 1
buildDropCapText(data.constructionInfo1),
buildText(data.constructionInfo1, true),
Center(child: buildHiddenCollectible(slot: 2)),
]),
Gap($styles.insets.md),
@ -119,14 +119,14 @@ class _ScrollingContent extends StatelessWidget {
_Callout(text: data.callout2),
/// Construction 2
buildText(data.constructionInfo2),
buildText(data.constructionInfo2, false),
_SlidingImageStack(scrollPos: scrollPos, type: data.type),
_SectionDivider(scrollPos, sectionNotifier, index: 2),
/// Location
buildDropCapText(data.locationInfo1),
buildText(data.locationInfo1, true),
_LargeSimpleQuote(text: data.pullQuote2, author: data.pullQuote2Author),
buildText(data.locationInfo2),
buildText(data.locationInfo2, false),
]),
Gap($styles.insets.md),
_MapsThumbnail(data),

6
lib/ui/screens/editorial/widgets/_title_text.dart
View File

@ -27,7 +27,7 @@ class _TitleText extends StatelessWidget {
Expanded(
child: Divider(
color: data.type.fgColor,
).animate().scale(curve: Curves.easeOut, delay: 500.ms),
).maybeAnimate().scale(curve: Curves.easeOut, delay: 500.delayMs),
),
Semantics(
header: true,
@ -35,12 +35,12 @@ class _TitleText extends StatelessWidget {
child: Text(
data.subTitle.toUpperCase(),
style: $styles.text.title2,
).animate().fade(delay: 100.ms),
).maybeAnimate().fade(delay: 100.delayMs),
),
Expanded(
child: Divider(
color: data.type.fgColor,
).animate().scale(curve: Curves.easeOut, delay: 500.ms),
).maybeAnimate().scale(curve: Curves.easeOut, delay: 500.delayMs),
),
],
),

2
lib/ui/screens/home/_vertical_swipe_controller.dart
View File

@ -17,7 +17,7 @@ class _VerticalSwipeController {
void handleTapCancelled() => isPointerDown.value = false;
void handleVerticalSwipeCancelled() {
swipeReleaseAnim.duration = swipeAmt.value.seconds * .5;
swipeReleaseAnim.duration = $styles.disableAnimations ? 1.ms : swipeAmt.value.seconds * .5;
swipeReleaseAnim.reverse(from: swipeAmt.value);
isPointerDown.value = false;
}

57
lib/ui/screens/home/wonders_home_screen.dart
View File

@ -1,12 +1,16 @@
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/common/animate_utils.dart';
import 'package:wonders/logic/data/wonder_data.dart';
import 'package:wonders/ui/common/app_icons.dart';
import 'package:wonders/ui/common/controls/app_header.dart';
import 'package:wonders/ui/common/controls/app_page_indicator.dart';
import 'package:wonders/ui/common/controls/trackpad_listener.dart';
import 'package:wonders/ui/common/gradient_container.dart';
import 'package:wonders/ui/common/ignore_pointer.dart';
import 'package:wonders/ui/common/previous_next_navigation.dart';
import 'package:wonders/ui/common/themed_text.dart';
import 'package:wonders/ui/common/utils/app_haptics.dart';
import 'package:wonders/ui/common/utils/duration_utils.dart';
import 'package:wonders/ui/screens/home_menu/home_menu.dart';
import 'package:wonders/ui/wonder_illustrations/common/animated_clouds.dart';
import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration.dart';
@ -111,7 +115,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
void _showDetailsPage() async {
_swipeOverride = _swipeController.swipeAmt.value;
context.go(ScreenPaths.wonderDetails(currentWonder.type, tabIndex: 0));
await Future.delayed(100.ms);
await Future.delayed(100.delayMs);
_swipeOverride = null;
_fadeInOnNextBuild = true;
}
@ -121,7 +125,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
for (var a in _fadeAnims) {
a.value = 0;
}
await Future.delayed(300.ms);
await Future.delayed(300.delayMs);
for (var a in _fadeAnims) {
a.forward();
}
@ -130,6 +134,12 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
}
}
void _handleTrackpadScroll(Offset direction) {
if (direction.dy < 0) {
_showDetailsPage();
}
}
@override
Widget build(BuildContext context) {
if (_fadeInOnNextBuild == true) {
@ -139,25 +149,29 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
return _swipeController.wrapGestureDetector(Container(
color: $styles.colors.black,
child: PreviousNextNavigation(
listenToMouseWheel: false,
onPreviousPressed: () => _handlePrevNext(-1),
onNextPressed: () => _handlePrevNext(1),
child: Stack(
children: [
/// Background
..._buildBgAndClouds(),
child: TrackpadListener(
scrollSensitivity: 60,
onScroll: _handleTrackpadScroll,
child: PreviousNextNavigation(
listenToMouseWheel: false,
onPreviousPressed: () => _handlePrevNext(-1),
onNextPressed: () => _handlePrevNext(1),
child: Stack(
children: [
/// Background
..._buildBgAndClouds(),
/// Wonders Illustrations (main content)
_buildMgPageView(),
/// Wonders Illustrations (main content)
_buildMgPageView(),
/// Foreground illustrations and gradients
_buildFgAndGradients(),
/// Foreground illustrations and gradients
_buildFgAndGradients(),
/// Controls that float on top of the various illustrations
_buildFloatingUi(),
],
).animate().fadeIn(),
/// Controls that float on top of the various illustrations
_buildFloatingUi(),
],
).maybeAnimate().fadeIn(),
),
),
));
}
@ -210,7 +224,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
Widget _buildFgAndGradients() {
Widget buildSwipeableBgGradient(Color fgColor) {
return _swipeController.buildListener(builder: (swipeAmt, isPointerDown, _) {
return IgnorePointer(
return IgnorePointerAndSemantics(
child: FractionallySizedBox(
heightFactor: .6,
child: Container(
@ -248,7 +262,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
return Animate(
effects: const [FadeEffect()],
onPlay: _handleFadeAnimInit,
child: IgnorePointer(child: WonderIllustration(e.type, config: config)));
child: IgnorePointerAndSemantics(child: WonderIllustration(e.type, config: config)));
});
}),
@ -277,8 +291,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
/// Title Content
LightText(
child: IgnorePointer(
ignoringSemantics: false,
child: IgnorePointerKeepSemantics(
child: Transform.translate(
offset: Offset(0, 30),
child: Column(

12
lib/ui/screens/home_menu/home_menu.dart
View File

@ -1,12 +1,14 @@
import 'package:flutter_svg/flutter_svg.dart';
import 'package:package_info_plus/package_info_plus.dart';
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/common/animate_utils.dart';
import 'package:wonders/logic/data/wonder_data.dart';
import 'package:wonders/ui/common/app_backdrop.dart';
import 'package:wonders/ui/common/app_icons.dart';
import 'package:wonders/ui/common/controls/app_header.dart';
import 'package:wonders/ui/common/controls/locale_switcher.dart';
import 'package:wonders/ui/common/pop_navigator_underlay.dart';
import 'package:wonders/ui/common/utils/duration_utils.dart';
import 'package:wonders/ui/common/wonderous_logo.dart';
import 'package:wonders/ui/screens/home_menu/about_dialog_content.dart';
@ -68,7 +70,7 @@ class _HomeMenuState extends State<HomeMenu> {
Gap(50),
Gap($styles.insets.md),
_buildIconGrid(context)
.animate()
.maybeAnimate()
.fade(duration: $styles.times.fast)
.scale(begin: Offset(.8, .8), curve: Curves.easeOut),
Gap($styles.insets.lg),
@ -127,9 +129,9 @@ class _HomeMenuState extends State<HomeMenu> {
valueListenable: settingsLogic.currentLocale,
builder: (_, __, ___) {
return SeparatedColumn(
separatorBuilder: () => Divider(thickness: 1.5, height: 1).animate().scale(
separatorBuilder: () => Divider(thickness: 1.5, height: 1).maybeAnimate().scale(
duration: $styles.times.slow,
delay: $styles.times.pageTransition + 200.ms,
delay: $styles.times.pageTransition + 200.delayMs,
curve: Curves.easeOutBack,
),
children: [
@ -147,8 +149,8 @@ class _HomeMenuState extends State<HomeMenu> {
onPressed: () => _handleAboutPressed(context),
),
]
.animate(interval: 50.ms)
.fade(delay: $styles.times.pageTransition + 50.ms)
.animate(interval: 50.delayMs)
.fade(delay: $styles.times.pageTransition + 50.delayMs)
.slide(begin: Offset(0, .1), curve: Curves.easeOut),
);
});

11
lib/ui/screens/intro/intro_screen.dart
View File

@ -4,10 +4,12 @@ import 'package:wonders/logic/common/platform_info.dart';
import 'package:wonders/ui/common/app_icons.dart';
import 'package:wonders/ui/common/controls/app_page_indicator.dart';
import 'package:wonders/ui/common/gradient_container.dart';
import 'package:wonders/ui/common/ignore_pointer.dart';
import 'package:wonders/ui/common/previous_next_navigation.dart';
import 'package:wonders/ui/common/static_text_scale.dart';
import 'package:wonders/ui/common/themed_text.dart';
import 'package:wonders/ui/common/utils/app_haptics.dart';
import 'package:wonders/ui/common/utils/duration_utils.dart';
class IntroScreen extends StatefulWidget {
const IntroScreen({super.key});
@ -59,7 +61,7 @@ class _IntroScreenState extends State<IntroScreen> {
final int current = _pageController.page!.round();
if (_isOnLastPage && dir > 0) return;
if (_isOnFirstPage && dir < 0) return;
_pageController.animateToPage(current + dir, duration: 250.ms, curve: Curves.easeIn);
_pageController.animateToPage(current + dir, duration: $styles.times.fast, curve: Curves.easeIn);
}
@override
@ -84,7 +86,7 @@ class _IntroScreenState extends State<IntroScreen> {
color: $styles.colors.black,
child: SafeArea(
child: Animate(
delay: 500.ms,
delay: 500.delayMs,
effects: const [FadeEffect()],
child: PreviousNextNavigation(
maxWidth: 600,
@ -112,8 +114,7 @@ class _IntroScreenState extends State<IntroScreen> {
),
),
IgnorePointer(
ignoringSemantics: false,
IgnorePointerKeepSemantics(
child: Column(children: [
Spacer(),
@ -325,6 +326,7 @@ class _PageImage extends StatelessWidget {
SizedBox.expand(
child: Image.asset(
'${ImagePaths.common}/intro-${data.img}.jpg',
excludeFromSemantics: true,
fit: BoxFit.cover,
alignment: Alignment.centerRight,
),
@ -332,6 +334,7 @@ class _PageImage extends StatelessWidget {
Positioned.fill(
child: Image.asset(
'${ImagePaths.common}/intro-mask-${data.mask}.png',
excludeFromSemantics: true,
fit: BoxFit.fill,
)),
],

109
lib/ui/screens/photo_gallery/photo_gallery.dart
View File

@ -2,11 +2,13 @@ import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/common/animate_utils.dart';
import 'package:wonders/logic/data/unsplash_photo_data.dart';
import 'package:wonders/ui/common/controls/app_loading_indicator.dart';
import 'package:wonders/ui/common/controls/eight_way_swipe_detector.dart';
import 'package:wonders/ui/common/fullscreen_keyboard_listener.dart';
import 'package:wonders/ui/common/hidden_collectible.dart';
import 'package:wonders/ui/common/ignore_pointer.dart';
import 'package:wonders/ui/common/modals/fullscreen_url_img_viewer.dart';
import 'package:wonders/ui/common/unsplash_photo.dart';
import 'package:wonders/ui/common/utils/app_haptics.dart';
@ -171,62 +173,63 @@ class _PhotoGalleryState extends State<PhotoGallery> {
return FullscreenKeyboardListener(
onKeyDown: _handleKeyDown,
child: ValueListenableBuilder<List<String>>(
valueListenable: _photoIds,
builder: (_, value, __) {
if (value.isEmpty) {
return Center(child: AppLoadingIndicator());
}
Size imgSize = context.isLandscape
? Size(context.widthPx * .5, context.heightPx * .66)
: Size(context.widthPx * .66, context.heightPx * .5);
imgSize = (widget.imageSize ?? imgSize) * _scale;
// Get transform offset for the current _index
final padding = $styles.insets.md;
var gridOffset = _calculateCurrentOffset(padding, imgSize);
gridOffset += Offset(0, -context.mq.padding.top / 2);
final offsetTweenDuration = _skipNextOffsetTween ? Duration.zero : swipeDuration;
final cutoutTweenDuration = _skipNextOffsetTween ? Duration.zero : swipeDuration * .5;
return _AnimatedCutoutOverlay(
animationKey: ValueKey(_index),
cutoutSize: imgSize,
swipeDir: _lastSwipeDir,
duration: cutoutTweenDuration,
opacity: _scale == 1 ? .7 : .5,
enabled: useClipPathWorkAroundForWeb == false,
child: SafeArea(
bottom: false,
// Place content in overflow box, to allow it to flow outside the parent
child: OverflowBox(
maxWidth: _gridSize * imgSize.width + padding * (_gridSize - 1),
maxHeight: _gridSize * imgSize.height + padding * (_gridSize - 1),
alignment: Alignment.center,
// Detect swipes in order to change index
child: EightWaySwipeDetector(
onSwipe: _handleSwipe,
threshold: 30,
// A tween animation builder moves from image to image based on current offset
child: TweenAnimationBuilder<Offset>(
tween: Tween(begin: gridOffset, end: gridOffset),
duration: offsetTweenDuration,
curve: Curves.easeOut,
builder: (_, value, child) => Transform.translate(offset: value, child: child),
child: FocusTraversalGroup(
//policy: OrderedTraversalPolicy(),
child: GridView.count(
physics: NeverScrollableScrollPhysics(),
crossAxisCount: _gridSize,
childAspectRatio: imgSize.aspectRatio,
mainAxisSpacing: padding,
crossAxisSpacing: padding,
children: List.generate(_imgCount, (i) => _buildImage(i, swipeDuration, imgSize)),
),
valueListenable: _photoIds,
builder: (_, value, __) {
if (value.isEmpty) {
return Center(child: AppLoadingIndicator());
}
Size imgSize = context.isLandscape
? Size(context.widthPx * .5, context.heightPx * .66)
: Size(context.widthPx * .66, context.heightPx * .5);
imgSize = (widget.imageSize ?? imgSize) * _scale;
// Get transform offset for the current _index
final padding = $styles.insets.md;
var gridOffset = _calculateCurrentOffset(padding, imgSize);
gridOffset += Offset(0, -context.mq.padding.top / 2);
final offsetTweenDuration = _skipNextOffsetTween ? Duration.zero : swipeDuration;
final cutoutTweenDuration = _skipNextOffsetTween ? Duration.zero : swipeDuration * .5;
return _AnimatedCutoutOverlay(
animationKey: ValueKey(_index),
cutoutSize: imgSize,
swipeDir: _lastSwipeDir,
duration: cutoutTweenDuration,
opacity: _scale == 1 ? .7 : .5,
enabled: useClipPathWorkAroundForWeb == false,
child: SafeArea(
bottom: false,
// Place content in overflow box, to allow it to flow outside the parent
child: OverflowBox(
maxWidth: _gridSize * imgSize.width + padding * (_gridSize - 1),
maxHeight: _gridSize * imgSize.height + padding * (_gridSize - 1),
alignment: Alignment.center,
// Detect swipes in order to change index
child: EightWaySwipeDetector(
onSwipe: _handleSwipe,
threshold: 30,
// A tween animation builder moves from image to image based on current offset
child: TweenAnimationBuilder<Offset>(
tween: Tween(begin: gridOffset, end: gridOffset),
duration: offsetTweenDuration,
curve: Curves.easeOut,
builder: (_, value, child) => Transform.translate(offset: value, child: child),
child: FocusTraversalGroup(
//policy: OrderedTraversalPolicy(),
child: GridView.count(
physics: NeverScrollableScrollPhysics(),
crossAxisCount: _gridSize,
childAspectRatio: imgSize.aspectRatio,
mainAxisSpacing: padding,
crossAxisSpacing: padding,
children: List.generate(_imgCount, (i) => _buildImage(i, swipeDuration, imgSize)),
),
),
),
),
),
);
}),
),
);
},
),
);
}
@ -257,7 +260,7 @@ class _PhotoGalleryState extends State<PhotoGallery> {
imgUrl,
fit: BoxFit.cover,
size: UnsplashPhotoSize.large,
).animate().fade(),
).maybeAnimate().fade(),
);
return MergeSemantics(
@ -290,7 +293,7 @@ class _PhotoGalleryState extends State<PhotoGallery> {
Positioned.fill(
child: AnimatedOpacity(
duration: $styles.times.med,
opacity: isSelected ? 0 : .7,
opacity: isSelected ? 0 : ($styles.highContrast ? 0.4 : 0.7),
child: ColoredBox(color: $styles.colors.black),
),
),

3
lib/ui/screens/timeline/timeline_screen.dart
View File

@ -3,6 +3,7 @@ import 'dart:ui';
import 'package:flutter/foundation.dart';
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/common/animate_utils.dart';
import 'package:wonders/logic/common/debouncer.dart';
import 'package:wonders/logic/common/string_utils.dart';
import 'package:wonders/logic/data/timeline_data.dart';
@ -11,9 +12,11 @@ import 'package:wonders/ui/common/blend_mask.dart';
import 'package:wonders/ui/common/centered_box.dart';
import 'package:wonders/ui/common/controls/app_header.dart';
import 'package:wonders/ui/common/dashed_line.dart';
import 'package:wonders/ui/common/ignore_pointer.dart';
import 'package:wonders/ui/common/list_gradient.dart';
import 'package:wonders/ui/common/timeline_event_card.dart';
import 'package:wonders/ui/common/utils/app_haptics.dart';
import 'package:wonders/ui/common/utils/duration_utils.dart';
import 'package:wonders/ui/common/wonders_timeline_builder.dart';
part 'widgets/_animated_era_text.dart';

2
lib/ui/screens/timeline/widgets/_animated_era_text.dart
View File

@ -11,6 +11,6 @@ class _AnimatedEraText extends StatelessWidget {
return Semantics(
liveRegion: true,
child: Text(era, style: style),
).animate(key: ValueKey(era)).fadeIn().slide(begin: Offset(0, .2));
).maybeAnimate(key: ValueKey(era)).fadeIn().slide(begin: Offset(0, .2));
}
}

3
lib/ui/screens/timeline/widgets/_event_markers.dart
View File

@ -54,8 +54,7 @@ class _EventMarkersState extends State<_EventMarkers> {
@override
Widget build(BuildContext context) {
return IgnorePointer(
ignoringSemantics: false,
return IgnorePointerKeepSemantics(
child: LayoutBuilder(builder: (_, constraints) {
/// Figure out which event is "selected"
_updateSelectedEvent(constraints.maxHeight);

5
lib/ui/screens/timeline/widgets/_event_popups.dart
View File

@ -9,7 +9,7 @@ class _EventPopups extends StatefulWidget {
}
class _EventPopupsState extends State<_EventPopups> {
final _debouncer = Debouncer(500.ms);
final _debouncer = Debouncer(500.animateMs);
TimelineEvent? _eventToShow;
@override
@ -35,8 +35,7 @@ class _EventPopupsState extends State<_EventPopups> {
final evt = _eventToShow;
return TopCenter(
child: ClipRect(
child: IgnorePointer(
ignoringSemantics: false,
child: IgnorePointerKeepSemantics(
child: AnimatedSwitcher(
duration: $styles.times.fast,
child: evt == null

5
lib/ui/screens/timeline/widgets/_scrolling_viewport.dart
View File

@ -66,11 +66,10 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
child: Stack(
children: [
// Main content area
_buildScrollingArea(context).animate().fadeIn(),
_buildScrollingArea(context).maybeAnimate().fadeIn(),
// Dashed line with a year that changes as we scroll
IgnorePointer(
ignoringSemantics: false,
IgnorePointerKeepSemantics(
child: AnimatedBuilder(
animation: controller.scroller,
builder: (_, __) {

2
lib/ui/screens/timeline/widgets/_scrolling_viewport_controller.dart
View File

@ -25,7 +25,7 @@ class _ScrollingViewportController extends ChangeNotifier {
final data = wondersLogic.getData(w);
final pos = calculateScrollPosFromYear(data.startYr);
scroller.jumpTo(pos - 200);
scroller.animateTo(pos, duration: 1.35.seconds, curve: Curves.easeOutCubic);
scroller.animateTo(pos, duration: $styles.times.extraSlow, curve: Curves.easeOutCubic);
scroller.addListener(_updateCurrentYear);
}
});

3
lib/ui/screens/timeline/widgets/_timeline_section.dart
View File

@ -20,8 +20,7 @@ class TimelineSection extends StatelessWidget {
StringUtils.formatYr(data.startYr),
StringUtils.formatYr(data.endYr),
)}',
child: IgnorePointer(
ignoringSemantics: false,
child: IgnorePointerKeepSemantics(
child: Container(
alignment: Alignment(0, -1 + fraction * 2),
padding: EdgeInsets.all($styles.insets.xs),

3
lib/ui/screens/timeline/widgets/_year_markers.dart
View File

@ -13,8 +13,7 @@ class _YearMarkers extends StatelessWidget {
@override
Widget build(BuildContext context) {
return IgnorePointer(
ignoringSemantics: false,
return IgnorePointerKeepSemantics(
child: LayoutBuilder(builder: (_, constraints) {
int interval = 100;
if (constraints.maxHeight < 800) {

6
lib/ui/screens/wonder_events/widgets/_events_list.dart
View File

@ -49,11 +49,11 @@ class _EventsListState extends State<_EventsList> {
final listItems = <Widget>[];
for (var e in events.entries) {
final delay = 100.ms + (100 * listItems.length).ms;
final delay = (100 + (100 * listItems.length)).delayMs;
listItems.add(
TimelineEventCard(year: e.key, text: e.value, darkMode: true)
.animate()
.fade(delay: delay, duration: $styles.times.med * 1.5)
.maybeAnimate()
.fade(delay: delay, duration: $styles.times.slow)
.slide(begin: Offset(0, 1), curve: Curves.easeOutBack),
);
}

3
lib/ui/screens/wonder_events/widgets/_wonder_image_with_timeline.dart
View File

@ -73,6 +73,7 @@ class _WonderImageWithTimeline extends StatelessWidget {
clipper: CurvedTopClipper(),
child: Image.asset(
data.type.flattened,
excludeFromSemantics: true,
width: 200,
fit: BoxFit.cover,
alignment: Alignment(0, -.5),
@ -107,7 +108,7 @@ class _WonderImageWithTimeline extends StatelessWidget {
_buildDot(context),
Text(StringUtils.getEra(data.startYr), style: textStyle),
],
).animate().fade(delay: $styles.times.pageTransition);
).maybeAnimate().fade(delay: $styles.times.pageTransition);
}
Widget _buildDot(BuildContext context) {

3
lib/ui/screens/wonder_events/wonder_events.dart
View File

@ -1,4 +1,5 @@
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/common/animate_utils.dart';
import 'package:wonders/logic/common/platform_info.dart';
import 'package:wonders/logic/common/string_utils.dart';
import 'package:wonders/logic/data/wonder_data.dart';
@ -8,9 +9,11 @@ import 'package:wonders/ui/common/centered_box.dart';
import 'package:wonders/ui/common/controls/app_header.dart';
import 'package:wonders/ui/common/curved_clippers.dart';
import 'package:wonders/ui/common/hidden_collectible.dart';
import 'package:wonders/ui/common/ignore_pointer.dart';
import 'package:wonders/ui/common/list_gradient.dart';
import 'package:wonders/ui/common/themed_text.dart';
import 'package:wonders/ui/common/timeline_event_card.dart';
import 'package:wonders/ui/common/utils/duration_utils.dart';
import 'package:wonders/ui/common/wonders_timeline_builder.dart';
import 'package:wonders/ui/wonder_illustrations/common/wonder_title_text.dart';

4
lib/ui/wonder_illustrations/common/animated_clouds.dart
View File

@ -2,6 +2,7 @@ import 'dart:async';
import 'package:wonders/common_libs.dart';
import 'package:wonders/ui/common/utils/context_utils.dart';
import 'package:wonders/ui/common/utils/duration_utils.dart';
// TODO: Clouds should fade in and out
// Shows a set of clouds that animated onto stage.
@ -21,7 +22,7 @@ class AnimatedClouds extends StatefulWidget with GetItStatefulWidgetMixin {
class _AnimatedCloudsState extends State<AnimatedClouds> with SingleTickerProviderStateMixin, GetItStateMixin {
late List<_Cloud> _clouds = [];
List<_Cloud> _oldClouds = [];
late final AnimationController _anim = AnimationController(vsync: this, duration: 1500.ms);
late final AnimationController _anim = AnimationController(vsync: this, duration: 1500.animateMs);
@override
void initState() {
@ -138,6 +139,7 @@ class _Cloud extends StatelessWidget {
scaleY: scale * (flipY ? -1 : 1),
child: Image.asset(
ImagePaths.cloud,
excludeFromSemantics: true,
opacity: AlwaysStoppedAnimation(.4 * opacity),
width: size * scale,
fit: BoxFit.fitWidth,

9
lib/ui/wonder_illustrations/common/illustration_piece.dart
View File

@ -86,7 +86,12 @@ class _IllustrationPieceState extends State<IllustrationPiece> {
final anim = wonderBuilder.anim;
final curvedAnim = Curves.easeOut.transform(anim.value);
final config = wonderBuilder.widget.config;
Widget img = Image.asset(imgPath, opacity: anim, fit: BoxFit.fitHeight);
Widget img = Image.asset(
imgPath,
excludeFromSemantics: true,
opacity: anim,
fit: BoxFit.fitHeight
);
// Add overflow box so image doesn't get clipped as we translate it around
img = OverflowBox(maxWidth: 2500, child: img);
@ -131,7 +136,7 @@ class _IllustrationPieceState extends State<IllustrationPiece> {
children: [
if (widget.bottom != null) Positioned.fill(child: widget.bottom!.call(context)),
if (uiImage != null) ...[
widget.enableHero ? Hero(tag: '$type-${widget.fileName}', child: content!) : content!,
widget.enableHero && !$styles.disableAnimations ? Hero(tag: '$type-${widget.fileName}', child: content!) : content!,
],
if (widget.top != null) Positioned.fill(child: widget.top!.call(context)),
],

1
lib/ui/wonder_illustrations/common/paint_textures.dart
View File

@ -18,6 +18,7 @@ class IllustrationTexture extends StatelessWidget {
scaleX: scale * (flipX ? -1 : 1),
scaleY: scale * (flipY ? -1 : 1),
child: Image.asset(path,
excludeFromSemantics: true,
repeat: ImageRepeat.repeat,
fit: BoxFit.contain,
alignment: Alignment.topCenter,

2
web/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<!-- app info -->
<title>Wonderous</title>