bachelor/wonders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #33 from gskinnerTeam/feature-improve-a11y

Browse Source 
Feature improve a11y
This commit is contained in:
Shawn 2022-09-20 19:39:14 -06:00 committed by GitHub
commit 16bf6715cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 512 additions and 452 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
lib/ui/common/controls/app_page_indicator.dart
View File

@ -3,15 +3,15 @@ import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/common/string_utils.dart';
class AppPageIndicator extends StatefulWidget {
AppPageIndicator(
{Key? key,
AppPageIndicator({
Key? key,
required this.count,
required this.controller,
this.onDotPressed,
this.color,
this.dotSize,
String? semanticPageTitle})
: semanticPageTitle = semanticPageTitle ?? $strings.appPageDefaultTitlePage,
String? semanticPageTitle,
}) : semanticPageTitle = semanticPageTitle ?? $strings.appPageDefaultTitlePage,
super(key: key);
final int count;
final PageController controller;
@ -33,9 +33,11 @@ class _AppPageIndicatorState extends State<AppPageIndicator> {
widget.controller.addListener(_handlePageChanged);
}
int get _controllerPage => widget.controller.page?.round() ?? 0;
int get _controllerPage => _currentPage.value;
void _handlePageChanged() => _currentPage.value = _controllerPage;
void _handlePageChanged() {
_currentPage.value = widget.controller.page!.round();
}
@override
Widget build(BuildContext context) {
@ -48,11 +50,12 @@ class _AppPageIndicatorState extends State<AppPageIndicator> {
valueListenable: _currentPage,
builder: (_, value, child) {
return Semantics(
container: true,
liveRegion: true,
focusable: false,
readOnly: true,
label: StringUtils.supplant($strings.appPageSemanticSwipe, {
'{pageTitle}': widget.semanticPageTitle,
'{count}': (value % (widget.count) + 1).toString(),
'{count}': (_controllerPage % (widget.count) + 1).toString(),
'{total}': widget.count.toString(),
}),
child: Container());

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

@ -138,20 +138,15 @@ class AppBtn extends StatelessWidget {
// add press effect:
if (pressEffect) button = _ButtonPressEffect(button);
// add semantics:
if (semanticLabel.isEmpty) {
button = ExcludeSemantics(child: button);
} else {
button = Semantics(
// add semantics?
if (semanticLabel.isEmpty) return button;
return Semantics(
label: semanticLabel,
button: true,
container: true,
child: button,
child: ExcludeSemantics(child: button),
);
}
return button;
}
}
/// //////////////////////////////////////////////////

50
lib/ui/common/pop_router_on_over_scroll.dart Normal file
View File

@ -0,0 +1,50 @@
import 'package:wonders/common_libs.dart';
class PopRouterOnOverScroll extends StatefulWidget {
const PopRouterOnOverScroll({Key? key, required this.child, required this.controller}) : super(key: key);
final ScrollController controller;
final Widget child;
@override
State<PopRouterOnOverScroll> createState() => _PopRouterOnOverScrollState();
}
class _PopRouterOnOverScrollState extends State<PopRouterOnOverScroll> {
final _scrollToPopThreshold = 70;
bool _isPointerDown = false;
@override
void initState() {
super.initState();
widget.controller.addListener(_handleScrollChanged);
}
@override
void didUpdateWidget(covariant PopRouterOnOverScroll oldWidget) {
if (widget.controller != oldWidget.controller) {
widget.controller.addListener(_handleScrollChanged);
}
super.didUpdateWidget(oldWidget);
}
bool _checkPointerIsDown(d) => _isPointerDown = d.dragDetails != null;
@override
Widget build(BuildContext context) {
return NotificationListener<ScrollUpdateNotification>(
onNotification: _checkPointerIsDown,
child: widget.child,
);
}
void _handleScrollChanged() {
// If user pulls far down on the elastic list, pop back to
final px = widget.controller.position.pixels;
if (px < -_scrollToPopThreshold) {
if (_isPointerDown) {
context.pop();
widget.controller.removeListener(_handleScrollChanged);
}
}
}
}

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

@ -6,6 +6,7 @@ import 'package:wonders/logic/data/highlight_data.dart';
import 'package:wonders/ui/common/controls/app_page_indicator.dart';
import 'package:wonders/ui/common/controls/simple_header.dart';
import 'package:wonders/ui/common/static_text_scale.dart';
part 'widgets/_blurred_image_bg.dart';
part 'widgets/_carousel_item.dart';
@ -25,14 +26,24 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
// Locally store loaded artifacts.
late List<HighlightData> _artifacts;
late PageController _controller;
final _currentIndex = ValueNotifier(0);
double get _currentOffset {
bool inited = _controller.hasClients && _controller.position.haveDimensions;
return inited ? _controller.page! : _controller.initialPage * 1.0;
bool hasOffset = _controller.hasClients && _controller.position.haveDimensions;
return hasOffset ? _controller.page! : _controller.initialPage * 1.0;
}
int get _currentIndex => _currentOffset.round() % _artifacts.length;
HighlightData get _currentArtifact => _artifacts[_currentIndex.value];
double get _backdropWidth {
final w = context.widthPx;
return w <= _maxElementWidth ? w : min(w * _partialElementWidth, _maxElementWidth);
}
double get _backdropHeight => math.min(context.heightPx * 0.65, _maxElementHeight);
bool get _small => _backdropHeight / _maxElementHeight < 0.7;
@override
void initState() {
@ -43,7 +54,7 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
// start at a high offset so we can scroll backwards:
initialPage: _artifacts.length * 9999,
viewportFraction: 0.5,
);
)..addListener(_handleCarouselScroll);
}
@override
@ -52,6 +63,8 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
super.dispose();
}
void _handleCarouselScroll() => _currentIndex.value = _currentOffset.round() % _artifacts.length;
void _handleArtifactTap(int index) {
int delta = index - _currentOffset.round();
if (delta == 0) {
@ -72,22 +85,19 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
@override
Widget build(BuildContext context) {
return ValueListenableBuilder<int>(
valueListenable: _currentIndex,
builder: (context, index, _) {
return Container(
color: $styles.colors.greyStrong,
child: AnimatedBuilder(animation: _controller, builder: _buildScreen),
);
}
Widget _buildScreen(BuildContext context, _) {
final double w = context.widthPx;
final double backdropWidth = w <= _maxElementWidth ? w : min(w * _partialElementWidth, _maxElementWidth);
final double backdropHeight = math.min(context.heightPx * 0.65, _maxElementHeight);
final bool small = backdropHeight / _maxElementHeight < 0.7;
final HighlightData artifact = _artifacts[_currentIndex];
return Stack(
child: Stack(
children: [
Positioned.fill(child: _BlurredImageBg(url: artifact.imageUrl)),
/// Background image
Positioned.fill(
child: _BlurredImageBg(url: _currentArtifact.imageUrl),
),
/// Content
Column(
children: [
SimpleHeader($strings.artifactsTitleArtifacts, showBackBtn: false, isTransparent: true),
@ -95,99 +105,71 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
Expanded(
child: Stack(children: [
// White arch, covering bottom half:
BottomCenter(
_buildWhiteArch(),
// Carousel
_buildCarouselPageView(),
// Text content
_buildBottomTextContent(),
]),
),
],
),
],
),
);
},
);
}
Widget _buildWhiteArch() {
return BottomCenter(
child: Container(
width: backdropWidth,
height: backdropHeight,
width: _backdropWidth,
height: _backdropHeight,
decoration: BoxDecoration(
color: $styles.colors.offWhite.withOpacity(0.8),
borderRadius: BorderRadius.vertical(top: Radius.circular(999)),
),
),
),
// Carousel:
Center(
child: SizedBox(
width: backdropWidth,
child: PageView.builder(
controller: _controller,
clipBehavior: Clip.none,
itemBuilder: (context, index) {
bool isCurrentIndex = index % _artifacts.length == _currentIndex;
return ExcludeSemantics(
excluding: isCurrentIndex == false,
child: MergeSemantics(
child: Semantics(
onIncrease: () => _handleArtifactTap(_currentIndex + 1),
onDecrease: () => _handleArtifactTap(_currentIndex - 1),
child: _CarouselItem(
index: index,
currentPage: _currentOffset,
artifact: _artifacts[index % _artifacts.length],
bottomPadding: backdropHeight,
maxWidth: backdropWidth,
maxHeight: backdropHeight,
onPressed: () => _handleArtifactTap(index),
),
),
),
);
},
),
),
),
}
// Text content
BottomCenter(
Widget _buildBottomTextContent() {
return BottomCenter(
child: Container(
width: backdropWidth,
width: _backdropWidth,
padding: EdgeInsets.symmetric(horizontal: $styles.insets.md),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Gap($styles.insets.md),
_buildContent(context, artifact, backdropWidth, small),
Gap(small ? $styles.insets.sm : $styles.insets.md),
AppBtn.from(
text: $strings.artifactsButtonBrowse,
icon: Icons.search,
expand: true,
onPressed: _handleSearchTap,
),
Gap(small ? $styles.insets.md : $styles.insets.lg),
],
),
),
),
]),
),
],
),
],
);
}
Widget _buildContent(BuildContext context, HighlightData artifact, double width, bool small) {
return Container(
width: width,
Container(
width: _backdropWidth,
padding: EdgeInsets.symmetric(horizontal: $styles.insets.sm),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
IgnorePointer(
child: ExcludeSemantics(
ignoringSemantics: false,
child: Semantics(
button: true,
onIncrease: () => _handleArtifactTap(_currentOffset.round() + 1),
onDecrease: () => _handleArtifactTap(_currentOffset.round() - 1),
onTap: () => _handleArtifactTap(_currentOffset.round()),
liveRegion: true,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: small ? 90 : 110,
height: _small ? 90 : 110,
alignment: Alignment.center,
child: StaticTextScale(
child: Text(
artifact.title,
_currentArtifact.title,
overflow: TextOverflow.ellipsis,
style: $styles.text.h2.copyWith(color: $styles.colors.black, height: 1.2),
textAlign: TextAlign.center,
@ -195,17 +177,17 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
),
),
),
if (!small) Gap($styles.insets.xxs),
if (!_small) Gap($styles.insets.xxs),
Text(
artifact.date.isEmpty ? '--' : artifact.date,
_currentArtifact.date.isEmpty ? '--' : _currentArtifact.date,
style: $styles.text.body,
textAlign: TextAlign.center,
),
],
).animate(key: ValueKey(artifact.artifactId)).fadeIn(),
).animate(key: ValueKey(_currentArtifact.artifactId)).fadeIn(),
),
),
Gap(small ? $styles.insets.xs : $styles.insets.sm),
Gap(_small ? $styles.insets.xs : $styles.insets.sm),
AppPageIndicator(
count: _artifacts.length,
controller: _controller,
@ -213,6 +195,46 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
),
],
),
),
Gap(_small ? $styles.insets.sm : $styles.insets.md),
AppBtn.from(
text: $strings.artifactsButtonBrowse,
icon: Icons.search,
expand: true,
onPressed: _handleSearchTap,
),
Gap(_small ? $styles.insets.md : $styles.insets.lg),
],
),
),
);
}
Widget _buildCarouselPageView() {
return Center(
child: SizedBox(
width: _backdropWidth,
child: ExcludeSemantics(
child: PageView.builder(
controller: _controller,
clipBehavior: Clip.none,
itemBuilder: (context, index) => AnimatedBuilder(
animation: _controller,
builder: (_, __) {
return _CarouselItem(
index: index,
currentPage: _currentOffset,
artifact: _artifacts[index % _artifacts.length],
bottomPadding: _backdropHeight,
maxWidth: _backdropWidth,
maxHeight: _backdropHeight,
onPressed: () => _handleArtifactTap(index),
);
},
),
),
),
),
);
}
}

2
lib/ui/screens/artifact/artifact_carousel/widgets/_carousel_item.dart
View File

@ -22,7 +22,7 @@ class _CarouselItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
return AppBtn.basic(
semanticLabel: '${artifact.title} ${artifact.date}',
semanticLabel: 'Explore artifact details',
onPressed: onPressed,
pressEffect: false,
child: _ImagePreview(

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

@ -1,4 +1,3 @@
import 'package:flutter/cupertino.dart';
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/common/string_utils.dart';
import 'package:wonders/logic/data/artifact_data.dart';
@ -7,8 +6,8 @@ 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';
part 'widgets/_header.dart';
part 'widgets/_content.dart';
part 'widgets/_header.dart';
class ArtifactDetailsScreen extends StatefulWidget {
const ArtifactDetailsScreen({Key? key, required this.artifactId}) : super(key: key);
@ -35,13 +34,21 @@ class _ArtifactDetailsScreenState extends State<ArtifactDetailsScreen> {
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(child: Icon(Icons.warning_amber_outlined, color: $styles.colors.accent1, size: $styles.insets.lg,)),
Center(
child: Icon(
Icons.warning_amber_outlined,
color: $styles.colors.accent1,
size: $styles.insets.lg,
)),
Gap($styles.insets.xs),
SizedBox(width: $styles.insets.xxl * 3, child: Text(
SizedBox(
width: $styles.insets.xxl * 3,
child: Text(
StringUtils.supplant($strings.artifactDetailsErrorNotFound, {'{artifactId}': widget.artifactId}),
style: $styles.text.body.copyWith(color: $styles.colors.offWhite),
textAlign: TextAlign.center,
),),
),
),
],
).animate().fadeIn();
} else if (!snapshot.hasData) {

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

@ -14,6 +14,7 @@ import 'package:wonders/ui/common/curved_clippers.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/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';
@ -47,8 +48,6 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
late final ScrollController _scroller = ScrollController()..addListener(_handleScrollChanged);
final _scrollPos = ValueNotifier(0.0);
final _sectionIndex = ValueNotifier(0);
final _scrollToPopThreshold = 50;
bool _isPointerDown = false;
@override
void dispose() {
@ -60,16 +59,7 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
void _handleScrollChanged() {
_scrollPos.value = _scroller.position.pixels;
widget.onScroll.call(_scrollPos.value);
// If user pulls far down on the elastic list, pop back to
if (_scrollPos.value < -_scrollToPopThreshold) {
if (_isPointerDown) {
context.pop();
_scroller.removeListener(_handleScrollChanged);
}
}
}
bool _checkPointerIsDown(d) => _isPointerDown = d.dragDetails != null;
@override
Widget build(BuildContext context) {
@ -79,8 +69,8 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
double minAppBarHeight = shortMode ? 80 : 120;
double maxAppBarHeight = shortMode ? 400 : 500;
return NotificationListener<ScrollUpdateNotification>(
onNotification: _checkPointerIsDown,
return PopRouterOnOverScroll(
controller: _scroller,
child: ColoredBox(
color: $styles.colors.offWhite,
child: Stack(
@ -116,7 +106,7 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
CustomScrollView(
primary: false,
controller: _scroller,
cacheExtent: 500,
cacheExtent: 1000,
slivers: [
/// Invisible padding at the top of the list, so the illustration shows through the btm
SliverToBoxAdapter(

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

@ -28,9 +28,10 @@ class _ScrollingContent extends StatelessWidget {
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 || MediaQuery.of(context).accessibleNavigation;
final bool skipCaps = !localeLogic.isEnglish;
return Semantics(
label: value,
child: ExcludeSemantics(
child: !skipCaps
? DropCapText(
_fixNewlines(value).substring(1),
@ -57,6 +58,7 @@ class _ScrollingContent extends StatelessWidget {
),
)
: Text(value, style: bodyStyle),
),
);
}

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

@ -22,9 +22,7 @@ class _VerticalSwipeController {
void handleVerticalSwipeUpdate(DragUpdateDetails details) {
if (swipeReleaseAnim.isAnimating) swipeReleaseAnim.stop();
if (details.delta.dy > 0) {
swipeAmt.value = 0;
} else {
isPointerDown.value = true;
double value = (swipeAmt.value - details.delta.dy / _pullToViewDetailsThreshold).clamp(0, 1);
if (value != swipeAmt.value) {
@ -33,7 +31,7 @@ class _VerticalSwipeController {
onSwipeComplete();
}
}
}
//print(_swipeUpAmt.value);
}
@ -53,18 +51,14 @@ class _VerticalSwipeController {
}
/// Utility method to wrap a gesture detector and wire up the required handlers.
Widget wrapGestureDetector(Widget child, {Key? key}) => Semantics(
button: false,
child: GestureDetector(
Widget wrapGestureDetector(Widget child, {Key? key}) => GestureDetector(
key: key,
onTapDown: (_) {
handleTapDown();
},
excludeFromSemantics: true,
onTapDown: (_) => handleTapDown(),
onTapUp: (_) => handleTapCancelled(),
onVerticalDragUpdate: handleVerticalSwipeUpdate,
onVerticalDragEnd: (_) => handleVerticalSwipeCancelled(),
onVerticalDragCancel: handleVerticalSwipeCancelled,
behavior: HitTestBehavior.translucent,
child: child),
);
child: child);
}

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

@ -1,4 +1,3 @@
import 'package:flutter/rendering.dart';
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/common/string_utils.dart';
import 'package:wonders/logic/data/wonder_data.dart';
@ -94,6 +93,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
}
void _startDelayedFgFade() async {
try {
for (var a in _fadeAnims) {
a.value = 0;
}
@ -101,6 +101,9 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
for (var a in _fadeAnims) {
a.forward();
}
} on Exception catch (e) {
debugPrint(e.toString());
}
}
@override
@ -109,208 +112,72 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
_startDelayedFgFade();
_fadeInOnNextBuild = false;
}
return _swipeController.wrapGestureDetector(
Container(
return _swipeController.wrapGestureDetector(Container(
color: $styles.colors.black,
child: Stack(
children: [
Stack(
children: [
/// Background
..._buildBgChildren(),
..._buildBgAndClouds(),
/// Clouds
FractionallySizedBox(
widthFactor: 1,
heightFactor: .5,
child: AnimatedClouds(wonderType: currentWonder.type, opacity: 1),
/// Wonders Illustrations (main content)
_buildMgPageView(),
/// Foreground illustrations and gradients
_buildFgAndGradients(),
/// Controls that float on top of the various illustrations
_buildFloatingUi(),
],
).animate().fadeIn(),
],
),
));
}
/// Wonders Illustrations
MergeSemantics(
child: Semantics(
header: true,
image: true,
liveRegion: true,
onIncrease: () => _setPageIndex(_wonderIndex + 1),
onDecrease: () => _setPageIndex(_wonderIndex - 1),
Widget _buildMgPageView() {
return ExcludeSemantics(
child: PageView.builder(
controller: _pageController,
onPageChanged: _handlePageViewChanged,
itemBuilder: _buildMgChild,
),
),
),
Stack(children: [
/// Foreground gradient-1, gets darker when swiping up
BottomCenter(
child: _buildSwipeableBgGradient(currentWonder.type.bgColor.withOpacity(.65)),
),
/// Foreground decorators
..._buildFgChildren(),
/// Foreground gradient-2, gets darker when swiping up
BottomCenter(
child: _buildSwipeableBgGradient(currentWonder.type.bgColor.withOpacity(1)),
),
/// Floating controls / UI
AnimatedSwitcher(
duration: $styles.times.fast,
child: RepaintBoundary(
key: ObjectKey(currentWonder),
child: OverflowBox(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(width: double.infinity),
const Spacer(),
/// Title Content
LightText(
child: IgnorePointer(
ignoringSemantics: false,
child: MergeSemantics(
child: Transform.translate(
offset: Offset(0, 30),
child: Column(
children: [
// Hide the title when the menu is open for visual polish
AnimatedOpacity(
opacity: _isMenuOpen ? 0 : 1,
duration: $styles.times.fast,
child: WonderTitleText(currentWonder, enableShadows: true),
),
Gap($styles.insets.md),
AppPageIndicator(
count: _numWonders,
controller: _pageController,
color: $styles.colors.white,
dotSize: 8,
onDotPressed: _handlePageIndicatorDotPressed,
semanticPageTitle: $strings.homeSemanticWonder,
),
Gap($styles.insets.md),
],
),
),
),
),
),
/// Animated arrow and background
/// Wrap in a container that is full-width to make it easier to find for screen readers
MergeSemantics(
child: Container(
width: double.infinity,
alignment: Alignment.center,
/// Lose state of child objects when index changes, this will re-run all the animated switcher and the arrow anim
key: ValueKey(_wonderIndex),
child: Stack(
children: [
/// Expanding rounded rect that grows in height as user swipes up
Positioned.fill(
child: _buildSwipeableArrowBg(),
),
/// Arrow Btn that fades in and out
_AnimatedArrowButton(onTap: _showDetailsPage, semanticTitle: currentWonder.title),
],
),
),
),
Gap($styles.insets.md),
],
),
),
),
),
/// Menu Btn
TopLeft(
child: AnimatedOpacity(
duration: $styles.times.fast,
opacity: _isMenuOpen ? 0 : 1,
child: MergeSemantics(
child: Semantics(
sortKey: OrdinalSortKey(0),
child: CircleIconBtn(
icon: AppIcons.menu,
onPressed: _handleOpenMenuPressed,
semanticLabel: $strings.homeSemanticOpenMain,
).safe(),
),
),
),
),
]),
],
).animate().fadeIn(),
),
);
}
Widget _buildMgChild(_, index) {
itemBuilder: (_, index) {
final wonder = _wonders[index % _wonders.length];
final wonderType = wonder.type;
bool isShowing = _isSelected(wonderType);
return _swipeController.buildListener(builder: (swipeAmt, _, child) {
return _swipeController.buildListener(
builder: (swipeAmt, _, child) {
final config = WonderIllustrationConfig.mg(
isShowing: isShowing,
zoom: .05 * swipeAmt,
);
return ExcludeSemantics(
excluding: !isShowing,
child: Semantics(
label: wonder.title,
child: WonderIllustration(wonderType, config: config),
),
);
});
}
List<Widget> _buildBgChildren() {
return _wonders.map((e) {
final config = WonderIllustrationConfig.bg(isShowing: _isSelected(e.type));
return WonderIllustration(e.type, config: config);
}).toList();
}
List<Widget> _buildFgChildren() {
return _wonders.map((e) {
return _swipeController.buildListener(builder: (swipeAmt, _, child) {
final config = WonderIllustrationConfig.fg(
isShowing: _isSelected(e.type),
zoom: .4 * (_swipeOverride ?? swipeAmt),
);
return Animate(
effects: const [FadeEffect()],
onPlay: _handleFadeAnimInit,
child: IgnorePointer(child: WonderIllustration(e.type, config: config)));
});
}).toList();
}
Widget _buildSwipeableArrowBg() {
return _swipeController.buildListener(
builder: (swipeAmt, _, child) {
double heightFactor = .5 + .5 * (1 + swipeAmt * 4);
return FractionallySizedBox(
alignment: Alignment.bottomCenter,
heightFactor: heightFactor,
child: Opacity(opacity: swipeAmt * .5, child: child),
return WonderIllustration(wonderType, config: config);
},
);
},
child: VtGradient(
[$styles.colors.white.withOpacity(0), $styles.colors.white.withOpacity(1)],
const [.3, 1],
borderRadius: BorderRadius.circular(99),
),
);
}
Widget _buildSwipeableBgGradient(Color fgColor) {
List<Widget> _buildBgAndClouds() {
return [
// Background
..._wonders.map((e) {
final config = WonderIllustrationConfig.bg(isShowing: _isSelected(e.type));
return WonderIllustration(e.type, config: config);
}).toList(),
// Clouds
FractionallySizedBox(
widthFactor: 1,
heightFactor: .5,
child: AnimatedClouds(wonderType: currentWonder.type, opacity: 1),
)
];
}
Widget _buildFgAndGradients() {
Widget buildSwipeableBgGradient(Color fgColor) {
return _swipeController.buildListener(builder: (swipeAmt, isPointerDown, _) {
return IgnorePointer(
child: FractionallySizedBox(
@ -332,4 +199,140 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
);
});
}
final gradientColor = currentWonder.type.bgColor;
return Stack(children: [
/// Foreground gradient-1, gets darker when swiping up
BottomCenter(
child: buildSwipeableBgGradient(gradientColor.withOpacity(.65)),
),
/// Foreground decorators
..._wonders.map((e) {
return _swipeController.buildListener(builder: (swipeAmt, _, child) {
final config = WonderIllustrationConfig.fg(
isShowing: _isSelected(e.type),
zoom: .4 * (_swipeOverride ?? swipeAmt),
);
return Animate(
effects: const [FadeEffect()],
onPlay: _handleFadeAnimInit,
child: IgnorePointer(child: WonderIllustration(e.type, config: config)));
});
}).toList(),
/// Foreground gradient-2, gets darker when swiping up
BottomCenter(
child: buildSwipeableBgGradient(gradientColor),
),
]);
}
Widget _buildFloatingUi() {
return Stack(children: [
/// Floating controls / UI
AnimatedSwitcher(
duration: $styles.times.fast,
child: RepaintBoundary(
child: OverflowBox(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(width: double.infinity),
const Spacer(),
/// Title Content
LightText(
child: IgnorePointer(
ignoringSemantics: false,
child: Transform.translate(
offset: Offset(0, 30),
child: Column(
children: [
Semantics(
liveRegion: true,
button: true,
header: true,
onIncrease: () => _setPageIndex(_wonderIndex + 1),
onDecrease: () => _setPageIndex(_wonderIndex - 1),
onTap: () => _showDetailsPage(),
// Hide the title when the menu is open for visual polish
child: AnimatedOpacity(
opacity: _isMenuOpen ? 0 : 1,
duration: $styles.times.fast,
child: WonderTitleText(currentWonder, enableShadows: true),
),
),
Gap($styles.insets.md),
AppPageIndicator(
count: _numWonders,
controller: _pageController,
color: $styles.colors.white,
dotSize: 8,
onDotPressed: _handlePageIndicatorDotPressed,
semanticPageTitle: $strings.homeSemanticWonder,
),
Gap($styles.insets.md),
],
),
),
),
),
/// Animated arrow and background
/// Wrap in a container that is full-width to make it easier to find for screen readers
Container(
width: double.infinity,
alignment: Alignment.center,
/// Lose state of child objects when index changes, this will re-run all the animated switcher and the arrow anim
key: ValueKey(_wonderIndex),
child: Stack(
children: [
/// Expanding rounded rect that grows in height as user swipes up
Positioned.fill(
child: _swipeController.buildListener(
builder: (swipeAmt, _, child) {
double heightFactor = .5 + .5 * (1 + swipeAmt * 4);
return FractionallySizedBox(
alignment: Alignment.bottomCenter,
heightFactor: heightFactor,
child: Opacity(opacity: swipeAmt * .5, child: child),
);
},
child: VtGradient(
[$styles.colors.white.withOpacity(0), $styles.colors.white.withOpacity(1)],
const [.3, 1],
borderRadius: BorderRadius.circular(99),
),
)),
/// Arrow Btn that fades in and out
_AnimatedArrowButton(onTap: _showDetailsPage, semanticTitle: currentWonder.title),
],
),
),
Gap($styles.insets.md),
],
),
),
),
),
/// Menu Btn
TopLeft(
child: AnimatedOpacity(
duration: $styles.times.fast,
opacity: _isMenuOpen ? 0 : 1,
child: MergeSemantics(
child: CircleIconBtn(
icon: AppIcons.menu,
onPressed: _handleOpenMenuPressed,
semanticLabel: $strings.homeSemanticOpenMain,
).safe(),
),
),
),
]);
}
}

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

@ -9,31 +9,19 @@ class _EventsList extends StatefulWidget {
}
class _EventsListState extends State<_EventsList> {
late final ScrollController _scroller = ScrollController()..addListener(_handleScrollChanged);
bool _hasPopped = false;
bool _isPointerDown = false;
final ScrollController _scroller = ScrollController();
@override
void dispose() {
_scroller.dispose();
super.dispose();
}
void _handleScrollChanged() {
if (!_isPointerDown) return;
if (_scroller.position.pixels < -100 && !_hasPopped) {
_hasPopped = true;
context.pop();
}
}
bool _checkPointerIsDown(d) => _isPointerDown = d.dragDetails != null;
void _handleGlobalTimelinePressed() => context.push(ScreenPaths.timeline(widget.data.type));
@override
Widget build(BuildContext context) {
return NotificationListener<ScrollUpdateNotification>(
onNotification: _checkPointerIsDown,
return PopRouterOnOverScroll(
controller: _scroller,
child: LayoutBuilder(builder: (_, constraints) {
return Stack(
children: [

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

@ -6,6 +6,7 @@ import 'package:wonders/ui/common/compass_divider.dart';
import 'package:wonders/ui/common/curved_clippers.dart';
import 'package:wonders/ui/common/hidden_collectible.dart';
import 'package:wonders/ui/common/list_gradient.dart';
import 'package:wonders/ui/common/pop_router_on_over_scroll.dart';
import 'package:wonders/ui/common/themed_text.dart';
import 'package:wonders/ui/common/timeline_event_card.dart';
import 'package:wonders/ui/common/wonders_timeline_builder.dart';

2
pubspec.yaml
View File

@ -1,7 +1,7 @@
name: wonders
description: Explore the famous wonders of the world.
publish_to: "none"
version: 1.9.4
version: 1.9.5
environment:
sdk: ">=2.16.0 <3.0.0"

5
release_notes.txt
View File

@ -1,3 +1,8 @@
# 1.9.5
- Improved a11y for Home Screen and Artifact Carousel
- Polished collection icons
- Added hero support to fullscreen Artifact Details
# 1.9.4
- Fix tappable arrow on home page
- Reduce text size for collapsing pull quote