From 3080f8d8670b90320320f435d0a49e47fe5845ee Mon Sep 17 00:00:00 2001
From: Shawn <shawn@gskinner.com>
Date: Tue, 18 Apr 2023 11:03:17 -0600
Subject: [PATCH] Retain scroll position on events view

---
 .../wonder_events/widgets/_events_list.dart   |  1 +
 .../screens/wonder_events/wonder_events.dart  | 21 +++++++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/lib/ui/screens/wonder_events/widgets/_events_list.dart b/lib/ui/screens/wonder_events/widgets/_events_list.dart
index a04170cf..81b3703c 100644
--- a/lib/ui/screens/wonder_events/widgets/_events_list.dart
+++ b/lib/ui/screens/wonder_events/widgets/_events_list.dart
@@ -61,6 +61,7 @@ class _EventsListState extends State<_EventsList> {
       children: [
         SingleChildScrollView(
           controller: _scroller,
+          key: PageStorageKey('eventsList'),
           child: Column(
             children: [
               IgnorePointer(child: Gap(widget.topHeight)),
diff --git a/lib/ui/screens/wonder_events/wonder_events.dart b/lib/ui/screens/wonder_events/wonder_events.dart
index 1c01904b..89427fd4 100644
--- a/lib/ui/screens/wonder_events/wonder_events.dart
+++ b/lib/ui/screens/wonder_events/wonder_events.dart
@@ -19,17 +19,24 @@ part 'widgets/_timeline_btn.dart';
 part 'widgets/_wonder_image_with_timeline.dart';
 
 //TODO: Maintain scroll position when switching from portrait to landscape
-class WonderEvents extends StatelessWidget {
+class WonderEvents extends StatefulWidget {
   WonderEvents({Key? key, required this.type}) : super(key: key);
   final WonderType type;
-  late final _data = wondersLogic.getData(type);
 
+  @override
+  State<WonderEvents> createState() => _WonderEventsState();
+}
+
+class _WonderEventsState extends State<WonderEvents> {
+  late final _data = wondersLogic.getData(widget.type);
+  final _eventsListKey = GlobalKey<_EventsListState>();
   double _scrollPos = 0;
+
   void _handleScroll(double pos) => _scrollPos = pos;
 
   @override
   Widget build(BuildContext context) {
-    void handleTimelineBtnPressed() => context.push(ScreenPaths.timeline(type));
+    void handleTimelineBtnPressed() => context.push(ScreenPaths.timeline(widget.type));
     // Main view content switches between 1 and 2 column layouts
     // On mobile, use the 2 column layout on screens close to landscape (>.85). This is primarily an optimization for foldable devices which have square-ish dimensions when opened.
     final twoColumnAspect = PlatformInfo.isMobile ? .85 : 1;
@@ -88,7 +95,7 @@ class WonderEvents extends StatelessWidget {
                         children: [
                           _WonderImageWithTimeline(data: _data, height: min(500, context.heightPx - 300)),
                           Gap($styles.insets.lg),
-                          SizedBox(width: 400, child: _TimelineBtn(type: type)),
+                          SizedBox(width: 400, child: _TimelineBtn(type: widget.type)),
                         ],
                       ),
                     ),
@@ -104,6 +111,7 @@ class WonderEvents extends StatelessWidget {
             child: CenteredBox(
               width: $styles.sizes.maxContentWidth2,
               child: _EventsList(
+                key: _eventsListKey,
                 data: _data,
                 topHeight: 100,
                 blurOnScroll: false,
@@ -132,8 +140,9 @@ class WonderEvents extends StatelessWidget {
             Column(
               children: [
                 Expanded(
-                  /// List
+                  /// EventsList
                   child: _EventsList(
+                    key: _eventsListKey,
                     data: _data,
                     topHeight: topHeight,
                     blurOnScroll: true,
@@ -144,7 +153,7 @@ class WonderEvents extends StatelessWidget {
                 ),
                 Gap($styles.insets.lg),
 
-                /// Btn
+                /// TimelineBtn
                 _TimelineBtn(type: _data.type, width: $styles.sizes.maxContentWidth2),
                 Gap($styles.insets.lg),
               ],