From af87d8e6db176afe4d37d154a1f9a2db6529b0eb Mon Sep 17 00:00:00 2001 From: Shawn Date: Mon, 14 Nov 2022 14:27:17 -0700 Subject: [PATCH] Remove popOnScroll from Events, finish landscape updates to Events --- lib/ui/common/timeline_event_card.dart | 43 ++++++++++--------- .../wonder_events/widgets/_events_list.dart | 7 ++- .../wonder_events/widgets/_timeline_btn.dart | 16 ++++--- .../screens/wonder_events/wonder_events.dart | 32 ++++++++++---- 4 files changed, 60 insertions(+), 38 deletions(-) diff --git a/lib/ui/common/timeline_event_card.dart b/lib/ui/common/timeline_event_card.dart index 84ecb3bb..8f1289d2 100644 --- a/lib/ui/common/timeline_event_card.dart +++ b/lib/ui/common/timeline_event_card.dart @@ -18,29 +18,32 @@ class TimelineEventCard extends StatelessWidget { child: Container( color: darkMode ? $styles.colors.greyStrong : $styles.colors.offWhite, padding: EdgeInsets.all($styles.insets.sm), - child: Row( - children: [ - /// Date - SizedBox( - width: 75, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text('${year.abs()}', style: $styles.text.h3.copyWith(fontWeight: FontWeight.w400, height: 1)), - Text(StringUtils.getYrSuffix(year), style: $styles.text.bodySmall), - ], + child: IntrinsicHeight( + child: Row( + children: [ + /// Date + SizedBox( + width: 75, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text('${year.abs()}', style: $styles.text.h3.copyWith(fontWeight: FontWeight.w400, height: 1)), + Text(StringUtils.getYrSuffix(year), style: $styles.text.bodySmall), + ], + ), ), - ), - /// Divider - Center(child: Container(width: 1, height: 50, color: darkMode ? Colors.white : $styles.colors.black)), - Gap($styles.insets.sm), + /// Divider + Container(width: 1, color: darkMode ? Colors.white : $styles.colors.black), - /// Text content - Expanded( - child: Text(text, style: $styles.text.bodySmall), - ), - ], + Gap($styles.insets.sm), + + /// Text content + Expanded( + child: Text(text, style: $styles.text.bodySmall), + ), + ], + ), ), ), ), diff --git a/lib/ui/screens/wonder_events/widgets/_events_list.dart b/lib/ui/screens/wonder_events/widgets/_events_list.dart index 5189acd6..9ebfd30d 100644 --- a/lib/ui/screens/wonder_events/widgets/_events_list.dart +++ b/lib/ui/screens/wonder_events/widgets/_events_list.dart @@ -29,9 +29,8 @@ class _EventsListState extends State<_EventsList> { @override Widget build(BuildContext context) { - return PopRouterOnOverScroll( - controller: _scroller, - child: LayoutBuilder(builder: (_, constraints) { + return LayoutBuilder( + builder: (_, constraints) { return Stack( children: [ AnimatedBuilder( @@ -67,7 +66,7 @@ class _EventsListState extends State<_EventsList> { ), ], ); - }), + }, ); } diff --git a/lib/ui/screens/wonder_events/widgets/_timeline_btn.dart b/lib/ui/screens/wonder_events/widgets/_timeline_btn.dart index 68344b92..5bfc4805 100644 --- a/lib/ui/screens/wonder_events/widgets/_timeline_btn.dart +++ b/lib/ui/screens/wonder_events/widgets/_timeline_btn.dart @@ -1,19 +1,23 @@ part of '../wonder_events.dart'; class _TimelineBtn extends StatelessWidget { - const _TimelineBtn({Key? key, required this.type}) : super(key: key); + const _TimelineBtn({Key? key, required this.type, this.width}) : super(key: key); final WonderType type; + final double? width; @override Widget build(BuildContext context) { void handleBtnPressed() => context.push(ScreenPaths.timeline(type)); return Padding( padding: EdgeInsets.symmetric(horizontal: $styles.insets.md), - child: AppBtn.from( - text: $strings.eventsListButtonOpenGlobal, - expand: true, - onPressed: handleBtnPressed, - semanticLabel: $strings.eventsListButtonOpenGlobal, + child: SizedBox( + width: width, + child: AppBtn.from( + text: $strings.eventsListButtonOpenGlobal, + expand: true, + onPressed: handleBtnPressed, + semanticLabel: $strings.eventsListButtonOpenGlobal, + ), ), ); } diff --git a/lib/ui/screens/wonder_events/wonder_events.dart b/lib/ui/screens/wonder_events/wonder_events.dart index b72474d4..f09c636d 100644 --- a/lib/ui/screens/wonder_events/wonder_events.dart +++ b/lib/ui/screens/wonder_events/wonder_events.dart @@ -16,6 +16,7 @@ part 'widgets/_events_list.dart'; 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 { WonderEvents({Key? key, required this.type}) : super(key: key); final WonderType type; @@ -31,10 +32,13 @@ class WonderEvents extends StatelessWidget { bottom: false, child: Stack( children: [ + /// Main view switches between portrait and landscape views Positioned.fill( top: $styles.insets.lg, child: context.isLandscape ? _buildLandscape() : _buildPortrait(), ), + + /// Floating TimelineBtn Positioned( right: $styles.insets.lg, top: $styles.insets.lg, @@ -49,11 +53,11 @@ class WonderEvents extends StatelessWidget { }); } - /// Landscape layout is a row, with the WonderImage on left and events on the right + /// Landscape layout is a row, with the WonderImage on left and EventsList on the right Widget _buildLandscape() { return Row( children: [ - /// WonderImage w/ Timeline btn sits on the left + /// WonderImage w/ Timeline btn Expanded( child: Center( child: SizedBox( @@ -73,12 +77,16 @@ class WonderEvents extends StatelessWidget { ), ), - /// Scrolling event list + /// EventsList Expanded( child: Center( child: SizedBox( width: $styles.sizes.maxContentWidth1, - child: _EventsList(data: _data, topHeight: 100, blurOnScroll: false), + child: _EventsList( + data: _data, + topHeight: 100, + blurOnScroll: false, + ), ), ), ), @@ -86,7 +94,7 @@ class WonderEvents extends StatelessWidget { ); } - /// Portrait layout is a stack with the list scrolling overtop of the WonderImage + /// Portrait layout is a stack with the EventsList scrolling overtop of the WonderImage Widget _buildPortrait() { return LayoutBuilder(builder: (_, constraints) { double topHeight = max(constraints.maxHeight * .55, 200); @@ -98,14 +106,22 @@ class WonderEvents extends StatelessWidget { /// Top content, sits underneath scrolling list _WonderImageWithTimeline(height: topHeight, data: _data), - /// Scrolling Events list, takes up the full view + /// EventsList + TimelineBtn Column( children: [ Expanded( - child: _EventsList(data: _data, topHeight: topHeight, blurOnScroll: true, showTopGradient: false), + /// List + child: _EventsList( + data: _data, + topHeight: topHeight, + blurOnScroll: true, + showTopGradient: false, + ), ), Gap($styles.insets.lg), - SizedBox(width: $styles.sizes.maxContentWidth3, child: _TimelineBtn(type: _data.type)), + + /// Btn + _TimelineBtn(type: _data.type, width: $styles.sizes.maxContentWidth3), Gap($styles.insets.xl), ], ),