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(
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),
),
],
),
),
),
),

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

@ -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> {
),
],
);
}),
},
);
}

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

@ -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,
),
),
);
}

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/_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),
],
),