Add ListenableBuilder, remove all AnimatedBuilders

lib/common_libs.dart

@@ -26,4 +26,5 @@ export 'package:wonders/ui/common/controls/buttons.dart';
 export 'package:wonders/ui/common/controls/circle_buttons.dart';
 export 'package:wonders/ui/common/controls/scroll_decorator.dart';
 export 'package:wonders/ui/common/controls/app_image.dart';
+export 'package:wonders/ui/common/listenable_builder.dart';
 export 'package:flutter_animate/flutter_animate.dart';

lib/ui/common/controls/scroll_decorator.dart

@@ -1,6 +1,4 @@
-import 'dart:math';
+import 'package:wonders/common_libs.dart';
-
-import 'package:flutter/material.dart';
 
 /// Easily add visual decorations to a scrolling widget based on the state of its controller.
 class ScrollDecorator extends StatefulWidget {
@@ -125,8 +123,8 @@ class _ScrollDecoratorState extends State<ScrollDecorator> {
   @override
   Widget build(BuildContext context) {
     content = widget.builder(currentController);
-    return AnimatedBuilder(
+    return ListenableBuilder(
-        animation: currentController,
+        listenable: currentController,
         builder: (_, __) {
           return Stack(
             children: [

lib/ui/common/fade_color_transition.dart

@@ -8,8 +8,8 @@ class FadeColorTransition extends StatelessWidget {
   final Color color;
 
   @override
-  Widget build(BuildContext context) => AnimatedBuilder(
+  Widget build(BuildContext context) => ListenableBuilder(
-        animation: animation,
+        listenable: animation,
         builder: (_, __) => Container(color: color.withOpacity(animation.value)),
       );
 }

lib/ui/common/listenable_builder.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/cupertino.dart';
+
+class ListenableBuilder extends AnimatedBuilder {
+  const ListenableBuilder({
+    Key? key,
+    required Listenable listenable,
+    required TransitionBuilder builder,
+    Widget? child,
+  }) : super(key: key, animation: listenable, builder: builder, child: child);
+}

lib/ui/common/modals/fullscreen_url_img_viewer.dart

@@ -26,8 +26,8 @@ class _FullscreenUrlImgViewerState extends State<FullscreenUrlImgViewer> {
 
   @override
   Widget build(BuildContext context) {
-    Widget content = AnimatedBuilder(
+    Widget content = ListenableBuilder(
-      animation: _isZoomed,
+      listenable: _isZoomed,
       builder: (_, __) {
         final bool enableSwipe = !_isZoomed.value && widget.urls.length > 1;
         return PageView.builder(

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

@@ -218,8 +218,8 @@ class _ArtifactScreenState extends State<ArtifactCarouselScreen> {
           child: PageView.builder(
             controller: _controller,
             clipBehavior: Clip.none,
-            itemBuilder: (context, index) => AnimatedBuilder(
+            itemBuilder: (context, index) => ListenableBuilder(
-              animation: _controller,
+              listenable: _controller,
               builder: (_, __) {
                 return _CarouselItem(
                   index: index,

lib/ui/screens/editorial/editorial_screen.dart

@@ -164,8 +164,8 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
               ),
 
               /// Home Btn
-              AnimatedBuilder(
+              ListenableBuilder(
-                  animation: _scroller,
+                  listenable: _scroller,
                   builder: (_, child) {
                     return AnimatedOpacity(
                       opacity: _scrollPos.value > 0 ? 0 : 1,

lib/ui/screens/editorial/widgets/_circular_title_bar.dart

@@ -94,8 +94,8 @@ class _AnimatedCircleWithTextState extends State<_AnimatedCircleWithText> with S
 
   @override
   Widget build(_) {
-    return AnimatedBuilder(
+    return ListenableBuilder(
-      animation: _anim,
+      listenable: _anim,
       builder: (_, __) {
         var rot = _prevIndex > widget.index ? -pi : pi;
         return Transform.rotate(

lib/ui/screens/editorial/widgets/_title_text.dart

@@ -46,8 +46,8 @@ class _TitleText extends StatelessWidget {
               /// Wonder title text
               Semantics(
                 sortKey: OrdinalSortKey(0),
-                child: AnimatedBuilder(
+                child: ListenableBuilder(
-                    animation: scroller,
+                    listenable: scroller,
                     builder: (_, __) {
                       final yPos = ContextUtils.getGlobalPos(context)?.dy ?? 0;
                       bool enableHero = yPos > -100;
@@ -68,8 +68,8 @@ class _TitleText extends StatelessWidget {
               ExcludeSemantics(
                 child: Padding(
                   padding: EdgeInsets.symmetric(horizontal: $styles.insets.md),
-                  child: AnimatedBuilder(
+                  child: ListenableBuilder(
-                    animation: scroller,
+                    listenable: scroller,
                     builder: (_, __) => CompassDivider(
                       isExpanded: scroller.position.pixels <= 0,
                       linesColor: data.type.fgColor,

lib/ui/screens/timeline/widgets/_bottom_scrubber.dart

@@ -54,8 +54,8 @@ class _BottomScrubber extends StatelessWidget {
           ),
 
           /// Visible area, follows the position of scroller
-          AnimatedBuilder(
+          ListenableBuilder(
-            animation: scroller,
+            listenable: scroller,
             builder: (_, __) {
               ScrollPosition? pos;
               if (scroller.hasClients) pos = scroller.position;

lib/ui/screens/timeline/widgets/_scrolling_viewport.dart

@@ -61,8 +61,8 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
           // Dashed line with a year that changes as we scroll
           IgnorePointer(
             ignoringSemantics: false,
-            child: AnimatedBuilder(
+            child: ListenableBuilder(
-              animation: controller.scroller,
+              listenable: controller.scroller,
               builder: (_, __) {
                 return _DashedDividerWithYear(controller.calculateYearFromScrollPos());
               },
@@ -79,8 +79,8 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
     Widget buildTimelineSection(WonderData data) {
       return ClipRRect(
         borderRadius: BorderRadius.circular(99),
-        child: AnimatedBuilder(
+        child: ListenableBuilder(
-          animation: controller.scroller,
+          listenable: controller.scroller,
           builder: (_, __) => TimelineSection(
             data,
             controller.calculateYearFromScrollPos(),
@@ -128,8 +128,8 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
                       ),
 
                       /// Event Markers, rebuilds on scroll
-                      AnimatedBuilder(
+                      ListenableBuilder(
-                        animation: controller.scroller,
+                        listenable: controller.scroller,
                         builder: (_, __) => _EventMarkers(
                           controller.calculateYearFromScrollPos(),
                           onEventChanged: _handleEventMarkerChanged,

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

@@ -29,47 +29,10 @@ class _EventsListState extends State<_EventsList> {
 
   @override
   Widget build(BuildContext context) {
-    return LayoutBuilder(
+    return widget.blurOnScroll ? _buildScrollingListWithBlur() : _buildScrollingList();
-      builder: (_, constraints) {
-        return Stack(
-          children: [
-            AnimatedBuilder(
-              animation: _scroller,
-              builder: (_, __) {
-                bool showBackdrop = widget.blurOnScroll;
-                double backdropAmt = 0;
-                if (_scroller.hasClients && showBackdrop) {
-                  double blurStart = 50;
-                  double maxScroll = 150;
-                  double scrollPx = _scroller.position.pixels - blurStart;
-                  // Normalize scroll position to a value between 0 and 1
-                  backdropAmt = (_scroller.position.pixels - blurStart).clamp(0, maxScroll) / maxScroll;
-                  // Disable backdrop once it is offscreen for an easy perf win
-                  showBackdrop = (scrollPx <= 500);
-                }
-                // Container provides a underlay which gets darker as the background blurs
-                return Stack(
-                  children: [
-                    if (showBackdrop) ...[
-                      AppBackdrop(
-                          strength: backdropAmt,
-                          child: IgnorePointer(
-                            child: Container(
-                              color: $styles.colors.black.withOpacity(backdropAmt * .6),
-                            ),
-                          )),
-                    ],
-                    _buildScrollingList()
-                  ],
-                );
-              },
-            ),
-          ],
-        );
-      },
-    );
   }
 
+  /// The actual content of the scrolling list
   Widget _buildScrollingList() {
     Container buildHandle() {
       return Container(
@@ -136,4 +99,40 @@ class _EventsListState extends State<_EventsList> {
       ],
     );
   }
+
+  /// Wraps the list in a scroll listener
+  Widget _buildScrollingListWithBlur() {
+    return ListenableBuilder(
+      listenable: _scroller,
+      child: _buildScrollingList(),
+      builder: (_, child) {
+        bool showBackdrop = true;
+        double backdropAmt = 0;
+        if (_scroller.hasClients && showBackdrop) {
+          double blurStart = 50;
+          double maxScroll = 150;
+          double scrollPx = _scroller.position.pixels - blurStart;
+          // Normalize scroll position to a value between 0 and 1
+          backdropAmt = (_scroller.position.pixels - blurStart).clamp(0, maxScroll) / maxScroll;
+          // Disable backdrop once it is offscreen for an easy perf win
+          showBackdrop = (scrollPx <= 500);
+        }
+        // Container provides a underlay which gets darker as the background blurs
+        return Stack(
+          children: [
+            if (showBackdrop) ...[
+              AppBackdrop(
+                  strength: backdropAmt,
+                  child: IgnorePointer(
+                    child: Container(
+                      color: $styles.colors.black.withOpacity(backdropAmt * .6),
+                    ),
+                  )),
+            ],
+            child!,
+          ],
+        );
+      },
+    );
+  }
 }

lib/ui/screens/wonder_events/wonder_events.dart

@@ -6,7 +6,6 @@ import 'package:wonders/ui/common/app_icons.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';

lib/ui/wonder_illustrations/common/animated_clouds.dart

@@ -89,8 +89,8 @@ class _AnimatedCloudsState extends State<AnimatedClouds> with SingleTickerProvid
     return RepaintBoundary(
       child: ClipRect(
         child: OverflowBox(
-          child: AnimatedBuilder(
+          child: ListenableBuilder(
-            animation: _anim,
+            listenable: _anim,
             builder: (_, __) {
               // A stack with 2 sets of clouds, one set is moving out of view while the other moves in.
               return Stack(

lib/ui/wonder_illustrations/common/paint_textures.dart

@@ -12,8 +12,8 @@ class IllustrationTexture extends StatelessWidget {
   final Animation<double>? opacity;
 
   @override
-  Widget build(BuildContext context) => AnimatedBuilder(
+  Widget build(BuildContext context) => ListenableBuilder(
-        animation: opacity ?? AlwaysStoppedAnimation(1),
+        listenable: opacity ?? AlwaysStoppedAnimation(1),
         builder: (context, child) => ClipRect(
           child: Transform.scale(
               scaleX: scale * (flipX ? -1 : 1),