bachelor/wonders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove popOnScroll from Events, finish landscape updates to Events

Browse Source
This commit is contained in:
Shawn 2022-11-14 14:27:17 -07:00
parent 34a0ae7dbf
commit af87d8e6db
4 changed files with 60 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
lib/ui/common/timeline_event_card.dart
View File

@ -18,29 +18,32 @@ class TimelineEventCard extends StatelessWidget {
child: Container( child: Container(
color: darkMode ? $styles.colors.greyStrong : $styles.colors.offWhite, color: darkMode ? $styles.colors.greyStrong : $styles.colors.offWhite,
padding: EdgeInsets.all($styles.insets.sm), padding: EdgeInsets.all($styles.insets.sm),
child: Row( child: IntrinsicHeight(
children: [ child: Row(
/// Date children: [
SizedBox( /// Date
width: 75, SizedBox(
child: Column( width: 75,
crossAxisAlignment: CrossAxisAlignment.start, child: Column(
children: [ crossAxisAlignment: CrossAxisAlignment.start,
Text('${year.abs()}', style: $styles.text.h3.copyWith(fontWeight: FontWeight.w400, height: 1)), children: [
Text(StringUtils.getYrSuffix(year), style: $styles.text.bodySmall), Text('${year.abs()}', style: $styles.text.h3.copyWith(fontWeight: FontWeight.w400, height: 1)),
], Text(StringUtils.getYrSuffix(year), style: $styles.text.bodySmall),
],
),
), ),
),
/// Divider /// Divider
Center(child: Container(width: 1, height: 50, color: darkMode ? Colors.white : $styles.colors.black)), Container(width: 1, color: darkMode ? Colors.white : $styles.colors.black),
Gap($styles.insets.sm),
/// Text content Gap($styles.insets.sm),
Expanded(
child: Text(text, style: $styles.text.bodySmall), /// Text content
), Expanded(
], child: Text(text, style: $styles.text.bodySmall),
),
],
),
), ),
), ),
), ),

7
lib/ui/screens/wonder_events/widgets/_events_list.dart
View File

@ -29,9 +29,8 @@ class _EventsListState extends State<_EventsList> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return PopRouterOnOverScroll( return LayoutBuilder(
controller: _scroller, builder: (_, constraints) {
child: LayoutBuilder(builder: (_, constraints) {
return Stack( return Stack(
children: [ children: [
AnimatedBuilder( AnimatedBuilder(
@ -67,7 +66,7 @@ class _EventsListState extends State<_EventsList> {
), ),
], ],
); );
}), },
); );
} }

16
lib/ui/screens/wonder_events/widgets/_timeline_btn.dart
View File

@ -1,19 +1,23 @@
part of '../wonder_events.dart'; part of '../wonder_events.dart';
class _TimelineBtn extends StatelessWidget { 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 WonderType type;
final double? width;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
void handleBtnPressed() => context.push(ScreenPaths.timeline(type)); void handleBtnPressed() => context.push(ScreenPaths.timeline(type));
return Padding( return Padding(
padding: EdgeInsets.symmetric(horizontal: $styles.insets.md), padding: EdgeInsets.symmetric(horizontal: $styles.insets.md),
child: AppBtn.from( child: SizedBox(
text: $strings.eventsListButtonOpenGlobal, width: width,
expand: true, child: AppBtn.from(
onPressed: handleBtnPressed, text: $strings.eventsListButtonOpenGlobal,
semanticLabel: $strings.eventsListButtonOpenGlobal, expand: true,
onPressed: handleBtnPressed,
semanticLabel: $strings.eventsListButtonOpenGlobal,
),
), ),
); );
} }

32
lib/ui/screens/wonder_events/wonder_events.dart
View File

@ -16,6 +16,7 @@ part 'widgets/_events_list.dart';
part 'widgets/_timeline_btn.dart'; part 'widgets/_timeline_btn.dart';
part 'widgets/_wonder_image_with_timeline.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 StatelessWidget {
WonderEvents({Key? key, required this.type}) : super(key: key); WonderEvents({Key? key, required this.type}) : super(key: key);
final WonderType type; final WonderType type;
@ -31,10 +32,13 @@ class WonderEvents extends StatelessWidget {
bottom: false, bottom: false,
child: Stack( child: Stack(
children: [ children: [
/// Main view switches between portrait and landscape views
Positioned.fill( Positioned.fill(
top: $styles.insets.lg, top: $styles.insets.lg,
child: context.isLandscape ? _buildLandscape() : _buildPortrait(), child: context.isLandscape ? _buildLandscape() : _buildPortrait(),
), ),
/// Floating TimelineBtn
Positioned( Positioned(
right: $styles.insets.lg, right: $styles.insets.lg,
top: $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() { Widget _buildLandscape() {
return Row( return Row(
children: [ children: [
/// WonderImage w/ Timeline btn sits on the left /// WonderImage w/ Timeline btn
Expanded( Expanded(
child: Center( child: Center(
child: SizedBox( child: SizedBox(
@ -73,12 +77,16 @@ class WonderEvents extends StatelessWidget {
), ),
), ),
/// Scrolling event list /// EventsList
Expanded( Expanded(
child: Center( child: Center(
child: SizedBox( child: SizedBox(
width: $styles.sizes.maxContentWidth1, 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() { Widget _buildPortrait() {
return LayoutBuilder(builder: (_, constraints) { return LayoutBuilder(builder: (_, constraints) {
double topHeight = max(constraints.maxHeight * .55, 200); double topHeight = max(constraints.maxHeight * .55, 200);
@ -98,14 +106,22 @@ class WonderEvents extends StatelessWidget {
/// Top content, sits underneath scrolling list /// Top content, sits underneath scrolling list
_WonderImageWithTimeline(height: topHeight, data: _data), _WonderImageWithTimeline(height: topHeight, data: _data),
/// Scrolling Events list, takes up the full view /// EventsList + TimelineBtn
Column( Column(
children: [ children: [
Expanded( 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), 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), Gap($styles.insets.xl),
], ],
), ),