Improve a11y on home-screen and carousel

lib/ui/common/controls/app_page_indicator.dart

@@ -3,15 +3,15 @@ import 'package:wonders/common_libs.dart';
 import 'package:wonders/logic/common/string_utils.dart';
 
 class AppPageIndicator extends StatefulWidget {
-  AppPageIndicator(
+  AppPageIndicator({
-      {Key? key,
+    Key? key,
     required this.count,
     required this.controller,
     this.onDotPressed,
     this.color,
     this.dotSize,
-      String? semanticPageTitle})
+    String? semanticPageTitle,
-      : semanticPageTitle = semanticPageTitle ?? $strings.appPageDefaultTitlePage,
+  })  : 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,12 +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());

lib/ui/common/pop_router_on_over_scroll.dart

@@ -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);
+      }
+    }
+  }
+}

lib/ui/screens/artifact/artifact_carousel/artifact_carousel_screen.dart

@@ -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,17 +26,25 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
 
   // Locally store loaded artifacts.
   late List<HighlightData> _artifacts;
+
   late PageController _controller;
+  final _currentIndex = ValueNotifier(0);
 
   double get _currentOffset {
     bool hasOffset = _controller.hasClients && _controller.position.haveDimensions;
     return hasOffset ? _controller.page! : _controller.initialPage * 1.0;
   }
 
-  final _currentIndex = ValueNotifier(0);
-
   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() {
     super.initState();
@@ -48,14 +57,14 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
     )..addListener(_handleCarouselScroll);
   }
 
-  void _handleCarouselScroll() => _currentIndex.value = _currentOffset.round() % _artifacts.length;
-
   @override
   void dispose() {
     _controller.dispose();
     super.dispose();
   }
 
+  void _handleCarouselScroll() => _currentIndex.value = _currentOffset.round() % _artifacts.length;
+
   void _handleArtifactTap(int index) {
     int delta = index - _currentOffset.round();
     if (delta == 0) {
@@ -76,26 +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(
+          child: Stack(
-        animation: _currentIndex,
-        builder: (context, __) => _buildScreen(context),
-      ),
-    );
-  }
-
-  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;
-
-    return Stack(
             children: [
+              /// Background image
               Positioned.fill(
                 child: _BlurredImageBg(url: _currentArtifact.imageUrl),
               ),
+
+              /// Content
               Column(
                 children: [
                   SimpleHeader($strings.artifactsTitleArtifacts, showBackBtn: false, isTransparent: true),
@@ -103,84 +105,49 @@ 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,
+        width: _backdropWidth,
-                    height: backdropHeight,
+        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) => AnimatedBuilder(
-                        animation: _controller,
-                        builder: (_, __) {
-                          bool isCurrentIndex = index % _artifacts.length == _currentIndex.value;
-                          return ExcludeSemantics(
-                            excluding: !isCurrentIndex,
-                            child: _CarouselItem(
-                              index: index,
-                              currentPage: _currentOffset,
-                              artifact: _artifacts[index % _artifacts.length],
-                              bottomPadding: backdropHeight,
-                              maxWidth: backdropWidth,
-                              maxHeight: backdropHeight,
-                              onPressed: () => _handleArtifactTap(index),
-                            ),
     );
-                        },
+  }
-                      ),
-                    ),
-                  ),
-                ),
 
-                // Text content
+  Widget _buildBottomTextContent() {
-                BottomCenter(
+    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, backdropWidth, small),
+            Container(
-                        Gap(small ? $styles.insets.sm : $styles.insets.md),
+              width: _backdropWidth,
-                        AppBtn.from(
-                          text: $strings.artifactsButtonBrowse,
-                          icon: Icons.search,
-                          expand: true,
-                          onPressed: _handleSearchTap,
-                        ),
-                        Gap(small ? $styles.insets.md : $styles.insets.lg),
-                      ],
-                    ),
-                  ),
-                ),
-              ]),
-            ),
-          ],
-        ),
-      ],
-    );
-  }
-
-  Widget _buildContent(BuildContext context, double width, bool small) {
-    return Semantics(
-      onIncrease: () => _handleArtifactTap(_currentOffset.round() + 1),
-      onDecrease: () => _handleArtifactTap(_currentOffset.round() - 1),
-      liveRegion: true,
-      child: Container(
-        width: width,
               padding: EdgeInsets.symmetric(horizontal: $styles.insets.sm),
               child: Column(
                 mainAxisSize: MainAxisSize.min,
@@ -188,11 +155,17 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
                 children: [
                   IgnorePointer(
                     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(
@@ -204,7 +177,7 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
                               ),
                             ),
                           ),
-                  if (!small) Gap($styles.insets.xxs),
+                          if (!_small) Gap($styles.insets.xxs),
                           Text(
                             _currentArtifact.date.isEmpty ? '--' : _currentArtifact.date,
                             style: $styles.text.body,
@@ -213,7 +186,8 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
                         ],
                       ).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,
@@ -222,6 +196,45 @@ 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),
+                );
+              },
+            ),
+          ),
+        ),
+      ),
     );
   }
 }

lib/ui/screens/artifact/artifact_details/artifact_details_screen.dart

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

lib/ui/screens/editorial/editorial_screen.dart

@@ -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>(
+      return PopRouterOnOverScroll(
-        onNotification: _checkPointerIsDown,
+        controller: _scroller,
         child: ColoredBox(
           color: $styles.colors.offWhite,
           child: Stack(

lib/ui/screens/home/_vertical_swipe_controller.dart

@@ -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);
   }
 

lib/ui/screens/home/widgets/_animated_arrow_button.dart

@@ -28,7 +28,7 @@ class _AnimatedArrowButton extends StatelessWidget {
       onPressed: onTap,
       child: SizedBox(
         height: 80,
-        width: 250,
+        width: 50,
         child: Animate(
           effects: [
             CustomEffect(builder: _buildOpacityTween, duration: duration, curve: Curves.easeOut),

lib/ui/screens/home/wonders_home_screen.dart

@@ -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,55 +112,128 @@ 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
+              /// Wonders Illustrations (main content)
+              _buildMgPageView(),
+
+              /// Foreground illustrations and gradients
+              _buildFgAndGradients(),
+
+              /// Controls that float on top of the various illustrations
+              _buildFloatingUi(),
+            ],
+          ).animate().fadeIn(),
+        ],
+      ),
+    ));
+  }
+
+  Widget _buildMgPageView() {
+    return ExcludeSemantics(
+      child: PageView.builder(
+        controller: _pageController,
+        onPageChanged: _handlePageViewChanged,
+        itemBuilder: (_, index) {
+          final wonder = _wonders[index % _wonders.length];
+          final wonderType = wonder.type;
+          bool isShowing = _isSelected(wonderType);
+          return _swipeController.buildListener(
+            builder: (swipeAmt, _, child) {
+              final config = WonderIllustrationConfig.mg(
+                isShowing: isShowing,
+                zoom: .05 * swipeAmt,
+              );
+              return WonderIllustration(wonderType, config: config);
+            },
+          );
+        },
+      ),
+    );
+  }
+
+  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),
-            ),
+      )
+    ];
+  }
 
-            /// Wonders Illustrations
+  Widget _buildFgAndGradients() {
-            MergeSemantics(
+    Widget buildSwipeableBgGradient(Color fgColor) {
-              child: Semantics(
+      return _swipeController.buildListener(builder: (swipeAmt, isPointerDown, _) {
-                liveRegion: true,
+        return IgnorePointer(
-                onIncrease: () => _setPageIndex(_wonderIndex + 1),
+          child: FractionallySizedBox(
-                onDecrease: () => _setPageIndex(_wonderIndex - 1),
+            heightFactor: .6,
-                onTap: () => _showDetailsPage(),
+            child: Container(
-                child: PageView.builder(
+              decoration: BoxDecoration(
-                  controller: _pageController,
+                gradient: LinearGradient(
-                  onPageChanged: _handlePageViewChanged,
+                  begin: Alignment.topCenter,
-                  itemBuilder: _buildMgChild,
+                  end: Alignment.bottomCenter,
+                  colors: [
+                    fgColor.withOpacity(0),
+                    fgColor.withOpacity(.5 + fgColor.opacity * .25 + (isPointerDown ? .05 : 0) + swipeAmt * .20),
+                  ],
+                  stops: const [0, 1],
                 ),
               ),
             ),
+          ),
+        );
+      });
+    }
 
-            Stack(children: [
+    final gradientColor = currentWonder.type.bgColor;
+    return Stack(children: [
       /// Foreground gradient-1, gets darker when swiping up
       BottomCenter(
-                child: _buildSwipeableBgGradient(currentWonder.type.bgColor.withOpacity(.65)),
+        child: buildSwipeableBgGradient(gradientColor.withOpacity(.65)),
       ),
 
       /// Foreground decorators
-              ..._buildFgChildren(),
+      ..._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(currentWonder.type.bgColor.withOpacity(1)),
+        child: buildSwipeableBgGradient(gradientColor),
       ),
+    ]);
+  }
 
+  Widget _buildFloatingUi() {
+    return Stack(children: [
       /// Floating controls / UI
       AnimatedSwitcher(
         duration: $styles.times.fast,
         child: RepaintBoundary(
-                  key: ObjectKey(currentWonder),
           child: OverflowBox(
             child: Column(
               mainAxisSize: MainAxisSize.min,
@@ -173,7 +249,13 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
                       offset: Offset(0, 30),
                       child: Column(
                         children: [
-                                  ExcludeSemantics(
+                          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,
@@ -182,7 +264,10 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
                             ),
                           ),
                           Gap($styles.insets.md),
-                                  AppPageIndicator(
+                          Semantics(
+                            onIncrease: () => _setPageIndex(_wonderIndex + 1),
+                            onDecrease: () => _setPageIndex(_wonderIndex - 1),
+                            child: AppPageIndicator(
                               count: _numWonders,
                               controller: _pageController,
                               color: $styles.colors.white,
@@ -190,6 +275,7 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
                               onDotPressed: _handlePageIndicatorDotPressed,
                               semanticPageTitle: $strings.homeSemanticWonder,
                             ),
+                          ),
                           Gap($styles.insets.md),
                         ],
                       ),
@@ -209,8 +295,21 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
                     children: [
                       /// Expanding rounded rect that grows in height as user swipes up
                       Positioned.fill(
-                                child: _buildSwipeableArrowBg(),
+                          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),
@@ -238,92 +337,6 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
           ),
         ),
       ),
-            ]),
+    ]);
-          ],
-        ).animate().fadeIn(),
-      ),
-    );
-  }
-
-  Widget _buildMgChild(_, index) {
-    final wonder = _wonders[index % _wonders.length];
-    final wonderType = wonder.type;
-    bool isShowing = _isSelected(wonderType);
-    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),
-        );
-      },
-      child: VtGradient(
-        [$styles.colors.white.withOpacity(0), $styles.colors.white.withOpacity(1)],
-        const [.3, 1],
-        borderRadius: BorderRadius.circular(99),
-      ),
-    );
-  }
-
-  Widget _buildSwipeableBgGradient(Color fgColor) {
-    return _swipeController.buildListener(builder: (swipeAmt, isPointerDown, _) {
-      return IgnorePointer(
-        child: FractionallySizedBox(
-          heightFactor: .6,
-          child: Container(
-            decoration: BoxDecoration(
-              gradient: LinearGradient(
-                begin: Alignment.topCenter,
-                end: Alignment.bottomCenter,
-                colors: [
-                  fgColor.withOpacity(0),
-                  fgColor.withOpacity(.5 + fgColor.opacity * .25 + (isPointerDown ? .05 : 0) + swipeAmt * .20),
-                ],
-                stops: const [0, 1],
-              ),
-            ),
-          ),
-        ),
-      );
-    });
   }
 }

lib/ui/screens/wonder_events/widgets/_events_list.dart

@@ -9,31 +9,19 @@ class _EventsList extends StatefulWidget {
 }
 
 class _EventsListState extends State<_EventsList> {
-  late final ScrollController _scroller = ScrollController()..addListener(_handleScrollChanged);
+  final ScrollController _scroller = ScrollController();
-  bool _hasPopped = false;
-  bool _isPointerDown = false;
   @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>(
+    return PopRouterOnOverScroll(
-      onNotification: _checkPointerIsDown,
+      controller: _scroller,
       child: LayoutBuilder(builder: (_, constraints) {
         return Stack(
           children: [

lib/ui/screens/wonder_events/wonder_events.dart

@@ -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';

pubspec.lock

@@ -35,7 +35,7 @@ packages:
       name: archive
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.3.0"
+    version: "3.3.1"
   args:
     dependency: transitive
     description:
@@ -238,7 +238,7 @@ packages:
       name: file
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "6.1.2"
+    version: "6.1.4"
   fixnum:
     dependency: transitive
     description:
@@ -588,7 +588,7 @@ packages:
       name: material_color_utilities
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.1.5"
+    version: "0.2.0"
   meta:
     dependency: transitive
     description:
@@ -978,7 +978,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.9.0"
+    version: "1.9.1"
   stack_trace:
     dependency: transitive
     description:
@@ -1027,7 +1027,7 @@ packages:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.12"
+    version: "0.4.13"
   timing:
     dependency: transitive
     description:
@@ -1125,14 +1125,14 @@ packages:
       name: vector_math
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.2"
+    version: "2.1.3"
   vm_service:
     dependency: transitive
     description:
       name: vm_service
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "9.0.0"
+    version: "9.3.0"
   watcher:
     dependency: transitive
     description:
@@ -1190,5 +1190,5 @@ packages:
     source: hosted
     version: "2.3.0"
 sdks:
-  dart: ">=2.17.1 <3.0.0"
+  dart: ">=2.18.0-146.0.dev <3.0.0"
   flutter: ">=3.0.0"