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.count,
-      required this.controller,
+    required this.controller,
-      this.onDotPressed,
+    this.onDotPressed,
-      this.color,
+    this.color,
-      this.dotSize,
+    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,152 +85,156 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return ValueListenableBuilder<int>(
-      color: $styles.colors.greyStrong,
+      valueListenable: _currentIndex,
-      child: AnimatedBuilder(
+      builder: (context, index, _) {
-        animation: _currentIndex,
+        return Container(
-        builder: (context, __) => _buildScreen(context),
+          color: $styles.colors.greyStrong,
+          child: Stack(
+            children: [
+              /// Background image
+              Positioned.fill(
+                child: _BlurredImageBg(url: _currentArtifact.imageUrl),
+              ),
+
+              /// Content
+              Column(
+                children: [
+                  SimpleHeader($strings.artifactsTitleArtifacts, showBackBtn: false, isTransparent: true),
+                  Gap($styles.insets.xs),
+                  Expanded(
+                    child: Stack(children: [
+                      // White arch, covering bottom half:
+                      _buildWhiteArch(),
+
+                      // Carousel
+                      _buildCarouselPageView(),
+
+                      // Text content
+                      _buildBottomTextContent(),
+                    ]),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  Widget _buildWhiteArch() {
+    return BottomCenter(
+      child: Container(
+        width: _backdropWidth,
+        height: _backdropHeight,
+        decoration: BoxDecoration(
+          color: $styles.colors.offWhite.withOpacity(0.8),
+          borderRadius: BorderRadius.vertical(top: Radius.circular(999)),
+        ),
       ),
     );
   }
 
-  Widget _buildScreen(BuildContext context) {
+  Widget _buildBottomTextContent() {
-    final double w = context.widthPx;
+    return BottomCenter(
-    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: [
-        Positioned.fill(
-          child: _BlurredImageBg(url: _currentArtifact.imageUrl),
-        ),
-        Column(
-          children: [
-            SimpleHeader($strings.artifactsTitleArtifacts, showBackBtn: false, isTransparent: true),
-            Gap($styles.insets.xs),
-            Expanded(
-              child: Stack(children: [
-                // White arch, covering bottom half:
-                BottomCenter(
-                  child: Container(
-                    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) => 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
-                BottomCenter(
-                  child: Container(
-                    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),
-                        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, double width, bool small) {
-    return Semantics(
-      onIncrease: () => _handleArtifactTap(_currentOffset.round() + 1),
-      onDecrease: () => _handleArtifactTap(_currentOffset.round() - 1),
-      liveRegion: true,
       child: Container(
-        width: width,
+        width: _backdropWidth,
-        padding: EdgeInsets.symmetric(horizontal: $styles.insets.sm),
+        padding: EdgeInsets.symmetric(horizontal: $styles.insets.md),
         child: Column(
           mainAxisSize: MainAxisSize.min,
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            IgnorePointer(
+            Gap($styles.insets.md),
-              ignoringSemantics: false,
+            Container(
+              width: _backdropWidth,
+              padding: EdgeInsets.symmetric(horizontal: $styles.insets.sm),
               child: Column(
                 mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.center,
                 children: [
-                  Container(
+                  IgnorePointer(
-                    height: small ? 90 : 110,
+                    ignoringSemantics: false,
-                    alignment: Alignment.center,
+                    child: Semantics(
-                    child: StaticTextScale(
+                      button: true,
-                      child: Text(
+                      onIncrease: () => _handleArtifactTap(_currentOffset.round() + 1),
-                        _currentArtifact.title,
+                      onDecrease: () => _handleArtifactTap(_currentOffset.round() - 1),
-                        overflow: TextOverflow.ellipsis,
+                      onTap: () => _handleArtifactTap(_currentOffset.round()),
-                        style: $styles.text.h2.copyWith(color: $styles.colors.black, height: 1.2),
+                      liveRegion: true,
-                        textAlign: TextAlign.center,
+                      child: Column(
-                        maxLines: 2,
+                        mainAxisSize: MainAxisSize.min,
-                      ),
+                        children: [
+                          Container(
+                            height: _small ? 90 : 110,
+                            alignment: Alignment.center,
+                            child: StaticTextScale(
+                              child: Text(
+                                _currentArtifact.title,
+                                overflow: TextOverflow.ellipsis,
+                                style: $styles.text.h2.copyWith(color: $styles.colors.black, height: 1.2),
+                                textAlign: TextAlign.center,
+                                maxLines: 2,
+                              ),
+                            ),
+                          ),
+                          if (!_small) Gap($styles.insets.xxs),
+                          Text(
+                            _currentArtifact.date.isEmpty ? '--' : _currentArtifact.date,
+                            style: $styles.text.body,
+                            textAlign: TextAlign.center,
+                          ),
+                        ],
+                      ).animate(key: ValueKey(_currentArtifact.artifactId)).fadeIn(),
                     ),
                   ),
-                  if (!small) Gap($styles.insets.xxs),
+                  Gap(_small ? $styles.insets.xs : $styles.insets.sm),
-                  Text(
+                  AppPageIndicator(
-                    _currentArtifact.date.isEmpty ? '--' : _currentArtifact.date,
+                    count: _artifacts.length,
-                    style: $styles.text.body,
+                    controller: _controller,
-                    textAlign: TextAlign.center,
+                    semanticPageTitle: $strings.artifactsSemanticArtifact,
                   ),
                 ],
-              ).animate(key: ValueKey(_currentArtifact.artifactId)).fadeIn(),
+              ),
             ),
-            Gap(small ? $styles.insets.xs : $styles.insets.sm),
+            Gap(_small ? $styles.insets.sm : $styles.insets.md),
-            AppPageIndicator(
+            AppBtn.from(
-              count: _artifacts.length,
+              text: $strings.artifactsButtonBrowse,
-              controller: _controller,
+              icon: Icons.search,
-              semanticPageTitle: $strings.artifactsSemanticArtifact,
+              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(
-                  StringUtils.supplant($strings.artifactDetailsErrorNotFound, {'{artifactId}': widget.artifactId}),
+                  width: $styles.insets.xxl * 3,
-                  style: $styles.text.body.copyWith(color: $styles.colors.offWhite),
+                  child: Text(
-                  textAlign: TextAlign.center,
+                    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,17 +59,8 @@ 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) {
     return LayoutBuilder(builder: (_, constraints) {
@@ -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,18 +22,16 @@ class _VerticalSwipeController {
 
   void handleVerticalSwipeUpdate(DragUpdateDetails details) {
     if (swipeReleaseAnim.isAnimating) swipeReleaseAnim.stop();
-    if (details.delta.dy > 0) {
+
-      swipeAmt.value = 0;
+    isPointerDown.value = true;
-    } else {
+    double value = (swipeAmt.value - details.delta.dy / _pullToViewDetailsThreshold).clamp(0, 1);
-      isPointerDown.value = true;
+    if (value != swipeAmt.value) {
-      double value = (swipeAmt.value - details.delta.dy / _pullToViewDetailsThreshold).clamp(0, 1);
+      swipeAmt.value = value;
-      if (value != swipeAmt.value) {
+      if (swipeAmt.value == 1) {
-        swipeAmt.value = value;
+        onSwipeComplete();
-        if (swipeAmt.value == 1) {
-          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,12 +93,16 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
   }
 
   void _startDelayedFgFade() async {
-    for (var a in _fadeAnims) {
+    try {
-      a.value = 0;
+      for (var a in _fadeAnims) {
-    }
+        a.value = 0;
-    await Future.delayed(300.ms);
+      }
-    for (var a in _fadeAnims) {
+      await Future.delayed(300.ms);
-      a.forward();
+      for (var a in _fadeAnims) {
+        a.forward();
+      }
+    } on Exception catch (e) {
+      debugPrint(e.toString());
     }
   }
 
@@ -109,221 +112,231 @@ class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateM
       _startDelayedFgFade();
       _fadeInOnNextBuild = false;
     }
-    return _swipeController.wrapGestureDetector(
-      Container(
-        color: $styles.colors.black,
-        child: Stack(
-          children: [
-            /// Background
-            ..._buildBgChildren(),
 
-            /// Clouds
+    return _swipeController.wrapGestureDetector(Container(
-            FractionallySizedBox(
+      color: $styles.colors.black,
-              widthFactor: 1,
+      child: Stack(
-              heightFactor: .5,
+        children: [
-              child: AnimatedClouds(wonderType: currentWonder.type, opacity: 1),
+          Stack(
-            ),
+            children: [
+              /// Background
+              ..._buildBgAndClouds(),
 
-            /// Wonders Illustrations
+              /// Wonders Illustrations (main content)
-            MergeSemantics(
+              _buildMgPageView(),
-              child: Semantics(
-                liveRegion: true,
-                onIncrease: () => _setPageIndex(_wonderIndex + 1),
-                onDecrease: () => _setPageIndex(_wonderIndex - 1),
-                onTap: () => _showDetailsPage(),
-                child: PageView.builder(
-                  controller: _pageController,
-                  onPageChanged: _handlePageViewChanged,
-                  itemBuilder: _buildMgChild,
-                ),
-              ),
-            ),
 
-            Stack(children: [
+              /// Foreground illustrations and gradients
-              /// Foreground gradient-1, gets darker when swiping up
+              _buildFgAndGradients(),
-              BottomCenter(
-                child: _buildSwipeableBgGradient(currentWonder.type.bgColor.withOpacity(.65)),
-              ),
 
-              /// Foreground decorators
+              /// Controls that float on top of the various illustrations
-              ..._buildFgChildren(),
+              _buildFloatingUi(),
+            ],
+          ).animate().fadeIn(),
+        ],
+      ),
+    ));
+  }
 
-              /// Foreground gradient-2, gets darker when swiping up
+  Widget _buildMgPageView() {
-              BottomCenter(
+    return ExcludeSemantics(
-                child: _buildSwipeableBgGradient(currentWonder.type.bgColor.withOpacity(1)),
+      child: PageView.builder(
-              ),
+        controller: _pageController,
-
+        onPageChanged: _handlePageViewChanged,
-              /// Floating controls / UI
+        itemBuilder: (_, index) {
-              AnimatedSwitcher(
+          final wonder = _wonders[index % _wonders.length];
-                duration: $styles.times.fast,
+          final wonderType = wonder.type;
-                child: RepaintBoundary(
+          bool isShowing = _isSelected(wonderType);
-                  key: ObjectKey(currentWonder),
+          return _swipeController.buildListener(
-                  child: OverflowBox(
+            builder: (swipeAmt, _, child) {
-                    child: Column(
+              final config = WonderIllustrationConfig.mg(
-                      mainAxisSize: MainAxisSize.min,
+                isShowing: isShowing,
-                      children: [
+                zoom: .05 * swipeAmt,
-                        SizedBox(width: double.infinity),
+              );
-                        const Spacer(),
+              return WonderIllustration(wonderType, config: config);
-
+            },
-                        /// Title Content
+          );
-                        LightText(
+        },
-                          child: IgnorePointer(
-                            ignoringSemantics: false,
-                            child: Transform.translate(
-                              offset: Offset(0, 30),
-                              child: Column(
-                                children: [
-                                  ExcludeSemantics(
-                                    // 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: _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: CircleIconBtn(
-                      icon: AppIcons.menu,
-                      onPressed: _handleOpenMenuPressed,
-                      semanticLabel: $strings.homeSemanticOpenMain,
-                    ).safe(),
-                  ),
-                ),
-              ),
-            ]),
-          ],
-        ).animate().fadeIn(),
       ),
     );
   }
 
-  Widget _buildMgChild(_, index) {
+  List<Widget> _buildBgAndClouds() {
-    final wonder = _wonders[index % _wonders.length];
+    return [
-    final wonderType = wonder.type;
+      // Background
-    bool isShowing = _isSelected(wonderType);
+      ..._wonders.map((e) {
-    return _swipeController.buildListener(builder: (swipeAmt, _, child) {
+        final config = WonderIllustrationConfig.bg(isShowing: _isSelected(e.type));
-      final config = WonderIllustrationConfig.mg(
+        return WonderIllustration(e.type, config: config);
-        isShowing: isShowing,
+      }).toList(),
-        zoom: .05 * swipeAmt,
+      // Clouds
-      );
+      FractionallySizedBox(
-      return ExcludeSemantics(
+        widthFactor: 1,
-        excluding: !isShowing,
+        heightFactor: .5,
-        child: Semantics(
+        child: AnimatedClouds(wonderType: currentWonder.type, opacity: 1),
-          label: wonder.title,
+      )
-          child: WonderIllustration(wonderType, config: config),
+    ];
-        ),
-      );
-    });
   }
 
-  List<Widget> _buildBgChildren() {
+  Widget _buildFgAndGradients() {
-    return _wonders.map((e) {
+    Widget buildSwipeableBgGradient(Color fgColor) {
-      final config = WonderIllustrationConfig.bg(isShowing: _isSelected(e.type));
+      return _swipeController.buildListener(builder: (swipeAmt, isPointerDown, _) {
-      return WonderIllustration(e.type, config: config);
+        return IgnorePointer(
-    }).toList();
+          child: FractionallySizedBox(
-  }
+            heightFactor: .6,
-
+            child: Container(
-  List<Widget> _buildFgChildren() {
+              decoration: BoxDecoration(
-    return _wonders.map((e) {
+                gradient: LinearGradient(
-      return _swipeController.buildListener(builder: (swipeAmt, _, child) {
+                  begin: Alignment.topCenter,
-        final config = WonderIllustrationConfig.fg(
+                  end: Alignment.bottomCenter,
-          isShowing: _isSelected(e.type),
+                  colors: [
-          zoom: .4 * (_swipeOverride ?? swipeAmt),
+                    fgColor.withOpacity(0),
-        );
+                    fgColor.withOpacity(.5 + fgColor.opacity * .25 + (isPointerDown ? .05 : 0) + swipeAmt * .20),
-        return Animate(
+                  ],
-            effects: const [FadeEffect()],
+                  stops: const [0, 1],
-            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],
               ),
             ),
           ),
+        );
+      });
+    }
+
+    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),
+                          Semantics(
+                            onIncrease: () => _setPageIndex(_wonderIndex + 1),
+                            onDecrease: () => _setPageIndex(_wonderIndex - 1),
+                            child: 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(),
+          ),
+        ),
+      ),
+    ]);
   }
 }

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"