Add centeredBox widget, polish editorial

lib/ui/common/centered_box.dart

@@ -0,0 +1,20 @@
+import 'package:wonders/common_libs.dart';
+
+class CenteredBox extends StatelessWidget {
+  const CenteredBox({Key? key, required this.child, this.width, this.height, this.padding}) : super(key: key);
+  final Widget child;
+  final double? width;
+  final double? height;
+  final EdgeInsets? padding;
+  @override
+  Widget build(BuildContext context) => Padding(
+        padding: padding ?? EdgeInsets.zero,
+        child: Center(
+          child: SizedBox(
+            width: width,
+            height: height,
+            child: child,
+          ),
+        ),
+      );
+}

lib/ui/common/listenable_builder.dart

@@ -1,10 +1,11 @@
 import 'package:flutter/cupertino.dart';
 
+/// Replacement for the built in [AnimatedBuilder] because that name is semantically confusing.
 class ListenableBuilder extends AnimatedBuilder {
   const ListenableBuilder({
-    Key? key,
+    super.key,
     required Listenable listenable,
-    required TransitionBuilder builder,
+    required super.builder,
-    Widget? child,
+    super.child,
-  }) : super(key: key, animation: listenable, builder: builder, child: child);
+  }) : super(animation: listenable);
 }

lib/ui/screens/collectible_found/collectible_found_screen.dart

@@ -1,6 +1,7 @@
 import 'package:wonders/common_libs.dart';
 import 'package:wonders/logic/data/collectible_data.dart';
 import 'package:particle_field/particle_field.dart';
+import 'package:wonders/ui/common/centered_box.dart';
 
 part 'widgets/_animated_ribbon.dart';
 part 'widgets/_celebration_particles.dart';
@@ -51,8 +52,7 @@ class CollectibleFoundScreen extends StatelessWidget {
       Animate().custom(duration: t, builder: (context, ratio, _) => _buildGradient(context, 1, ratio)),
       _CelebrationParticles(fadeMs: (t * 6).inMilliseconds),
       SafeArea(
-        child: Center(
+        child: CenteredBox(
-          child: SizedBox(
           width: $styles.sizes.maxContentWidth3,
           child: Column(
             children: [
@@ -78,7 +78,6 @@ class CollectibleFoundScreen extends StatelessWidget {
           ),
         ),
       ),
-      ),
       BackBtn.close().safe().animate().fade(delay: t * 4, duration: t * 2),
     ]);
   }

lib/ui/screens/collection/collection_screen.dart

@@ -5,6 +5,7 @@ import 'package:wonders/logic/collectibles_logic.dart';
 import 'package:wonders/logic/common/string_utils.dart';
 import 'package:wonders/logic/data/collectible_data.dart';
 import 'package:wonders/logic/data/wonder_data.dart';
+import 'package:wonders/ui/common/centered_box.dart';
 import 'package:wonders/ui/common/controls/simple_header.dart';
 import 'package:wonders/ui/common/modals/app_modals.dart';
 

lib/ui/screens/collection/widgets/_collection_footer.dart

@@ -24,8 +24,7 @@ class _CollectionFooter extends StatelessWidget {
         color: $styles.colors.greyStrong,
         child: SafeArea(
           top: false,
-          child: Center(
+          child: CenteredBox(
-            child: SizedBox(
             width: $styles.sizes.maxContentWidth1,
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.stretch,
@@ -38,7 +37,6 @@ class _CollectionFooter extends StatelessWidget {
             ),
           ),
         ),
-        ),
       )
     ]);
   }

lib/ui/screens/editorial/editorial_screen.dart

@@ -9,6 +9,7 @@ import 'package:wonders/logic/common/string_utils.dart';
 import 'package:wonders/logic/data/wonder_data.dart';
 import 'package:wonders/ui/common/app_icons.dart';
 import 'package:wonders/ui/common/blend_mask.dart';
+import 'package:wonders/ui/common/centered_box.dart';
 import 'package:wonders/ui/common/compass_divider.dart';
 import 'package:wonders/ui/common/curved_clippers.dart';
 import 'package:wonders/ui/common/google_maps_marker.dart';

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

@@ -42,8 +42,9 @@ class _CollapsingPullQuoteImage extends StatelessWidget {
 
         // The sized boxes in the column collapse to a zero height, allowing the quotes to naturally sit over top of the image
         return MergeSemantics(
-          child: Padding(
+          child: CenteredBox(
             padding: EdgeInsets.symmetric(vertical: outerPadding),
+            width: 450,
             child: Stack(
               children: [
                 Container(

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

@@ -8,7 +8,7 @@ class _SlidingImageStack extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final totalSize = Size(280, 400);
+    final totalSize = Size(400, 600);
     Container buildPhoto(double scale, String url, Alignment align, {bool top = true}) {
       return Container(
         width: totalSize.width * scale,
@@ -24,11 +24,10 @@ class _SlidingImageStack extends StatelessWidget {
     }
 
     return ExcludeSemantics(
-      child: Padding(
+      child: CenteredBox(
-        padding: const EdgeInsets.all(8.0),
-        child: SizedBox(
         width: totalSize.width,
         height: totalSize.height,
+        padding: const EdgeInsets.all(8.0),
         child: ValueListenableBuilder(
           valueListenable: scrollPos,
           builder: (context, value, child) {
@@ -41,26 +40,6 @@ class _SlidingImageStack extends StatelessWidget {
             }
             return Stack(
               children: [
-                  Center(
-                    child: FractionalTranslation(
-                      translation: Offset(0, 0.05 * pctVisible),
-                      child: Transform(
-                        alignment: Alignment.center, //origin: Offset(100, 100)
-                        transform: Matrix4.rotationZ(0.9),
-                        child: Container(
-                          width: context.widthPx / 1.75,
-                          height: context.widthPx,
-                          decoration: BoxDecoration(
-                            borderRadius: BorderRadius.all(Radius.elliptical(200, 300)),
-                            border: Border.all(
-                              color: $styles.colors.accent2,
-                              width: 1,
-                            ),
-                          ),
-                        ),
-                      ),
-                    ),
-                  ),
                 TopRight(
                   child: FractionalTranslation(
                     translation: Offset(0, -.1 + .2 * pctVisible),
@@ -87,7 +66,6 @@ class _SlidingImageStack extends StatelessWidget {
           },
         ),
       ),
-      ),
     );
   }
 }

lib/ui/screens/timeline/timeline_screen.dart

@@ -8,6 +8,7 @@ import 'package:wonders/logic/common/string_utils.dart';
 import 'package:wonders/logic/data/timeline_data.dart';
 import 'package:wonders/logic/data/wonder_data.dart';
 import 'package:wonders/ui/common/blend_mask.dart';
+import 'package:wonders/ui/common/centered_box.dart';
 import 'package:wonders/ui/common/controls/simple_header.dart';
 import 'package:wonders/ui/common/dashed_line.dart';
 import 'package:wonders/ui/common/list_gradient.dart';
@@ -76,7 +77,9 @@ class _TimelineScreenState extends State<TimelineScreen> {
 
               /// Mini Horizontal timeline, reacts to the state of the larger scrolling timeline,
               /// and changes the timelines scroll position on Hz drag
-              Padding(
+              CenteredBox(
+                width: $styles.sizes.maxContentWidth1,
+                child: Padding(
                   padding: EdgeInsets.symmetric(horizontal: $styles.insets.lg),
                   child: _BottomScrubber(
                     _scroller,
@@ -85,6 +88,7 @@ class _TimelineScreenState extends State<TimelineScreen> {
                     selectedWonder: widget.type,
                   ),
                 ),
+              ),
               Gap($styles.insets.lg),
             ],
           ),

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

@@ -29,9 +29,12 @@ class _BottomScrubber extends StatelessWidget {
 
     /// It might take a frame until we receive a valid scroller
     if (scroller == null) return SizedBox.shrink();
+
+    return LayoutBuilder(builder: (context, constraints) {
       void handleScrubberPan(DragUpdateDetails details) {
+        final totalWidth = constraints.maxWidth;
         if (!scroller.hasClients) return;
-      double dragMultiplier = (scroller.position.maxScrollExtent + timelineMinSize) / context.widthPx;
+        double dragMultiplier = (scroller.position.maxScrollExtent + timelineMinSize) / totalWidth;
         double newPos = scroller.position.pixels + details.delta.dx * dragMultiplier;
         scroller.position.jumpTo(newPos.clamp(0, scroller.position.maxScrollExtent));
       }
@@ -90,6 +93,7 @@ class _BottomScrubber extends StatelessWidget {
           ],
         ),
       );
+    });
   }
 
   Container _buildOutlineBox(BuildContext context, Alignment alignment) {

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

@@ -95,18 +95,17 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
         // cache constraints, so they can be used to maintain the selected year while zooming
         controller._constraints = constraints;
         double vtPadding = constraints.maxHeight / 2;
-        double size = controller.calculateContentHeight();
+        double height = controller.calculateContentHeight();
-        final contentSize = min($styles.sizes.maxContentWidth2, constraints.maxWidth);
+        final width = min($styles.sizes.maxContentWidth2, constraints.maxWidth);
         return Stack(
           children: [
             SingleChildScrollView(
               controller: controller.scroller,
               padding: EdgeInsets.symmetric(vertical: vtPadding),
               // A stack inside a SizedBox which sets its overall height
-              child: Center(
+              child: CenteredBox(
-                child: SizedBox(
+                height: height,
-                  height: size,
+                width: width,
-                  width: contentSize,
                 child: Stack(
                   children: [
                     /// Year Markers
@@ -120,7 +119,7 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
                         //child: Placeholder(),
                         child: WondersTimelineBuilder(
                           axis: Axis.vertical,
-                            crossAxisGap: max(6, (contentSize - (120 * 3)) / 2),
+                          crossAxisGap: max(6, (width - (120 * 3)) / 2),
                           minSize: _minTimelineSize,
                           timelineBuilder: (_, data, __) => buildTimelineSection(data),
                         ),
@@ -139,7 +138,6 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
                 ),
               ),
             ),
-            ),
 
             /// Top and bottom gradients for visual style
             ListOverscollGradient(),

lib/ui/screens/wonder_events/wonder_events.dart

@@ -3,6 +3,7 @@ import 'package:wonders/logic/common/string_utils.dart';
 import 'package:wonders/logic/data/wonder_data.dart';
 import 'package:wonders/ui/common/app_backdrop.dart';
 import 'package:wonders/ui/common/app_icons.dart';
+import 'package:wonders/ui/common/centered_box.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';
@@ -58,8 +59,7 @@ class WonderEvents extends StatelessWidget {
       children: [
         /// WonderImage w/ Timeline btn
         Expanded(
-          child: Center(
+          child: CenteredBox(
-            child: SizedBox(
             width: $styles.sizes.maxContentWidth3,
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
@@ -74,12 +74,10 @@ class WonderEvents extends StatelessWidget {
             ),
           ),
         ),
-        ),
 
         /// EventsList
         Expanded(
-          child: Center(
+          child: CenteredBox(
-            child: SizedBox(
             width: $styles.sizes.maxContentWidth1,
             child: _EventsList(
               data: _data,
@@ -88,7 +86,6 @@ class WonderEvents extends StatelessWidget {
             ),
           ),
         ),
-        ),
       ],
     );
   }
@@ -97,8 +94,7 @@ class WonderEvents extends StatelessWidget {
   Widget _buildPortrait() {
     return LayoutBuilder(builder: (_, constraints) {
       double topHeight = max(constraints.maxHeight * .55, 200);
-      return Center(
+      return CenteredBox(
-        child: SizedBox(
         width: $styles.sizes.maxContentWidth3,
         child: Stack(
           children: [
@@ -126,7 +122,6 @@ class WonderEvents extends StatelessWidget {
             ),
           ],
         ),
-        ),
       );
     });
   }

pubspec.yaml

@@ -4,7 +4,7 @@ publish_to: "none"
 version: 1.9.7
 
 environment:
-  sdk: ">=2.16.0 <3.0.0"
+  sdk: ">=2.17.0 <3.0.0"
 
 dependencies:
   flutter: