119 lines
4.1 KiB
Dart
119 lines
4.1 KiB
Dart
import 'package:wonders/common_libs.dart';
|
|
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/curved_clippers.dart';
|
|
import 'package:wonders/ui/common/hidden_collectible.dart';
|
|
import 'package:wonders/ui/common/list_gradient.dart';
|
|
import 'package:wonders/ui/common/pop_router_on_over_scroll.dart';
|
|
import 'package:wonders/ui/common/themed_text.dart';
|
|
import 'package:wonders/ui/common/timeline_event_card.dart';
|
|
import 'package:wonders/ui/common/wonders_timeline_builder.dart';
|
|
import 'package:wonders/ui/wonder_illustrations/common/wonder_title_text.dart';
|
|
|
|
part 'widgets/_events_list.dart';
|
|
part 'widgets/_timeline_btn.dart';
|
|
part 'widgets/_wonder_image_with_timeline.dart';
|
|
|
|
class WonderEvents extends StatelessWidget {
|
|
WonderEvents({Key? key, required this.type}) : super(key: key);
|
|
final WonderType type;
|
|
late final _data = wondersLogic.getData(type);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
void handleTimelineBtnPressed() => context.push(ScreenPaths.timeline(type));
|
|
return LayoutBuilder(builder: (context, constraints) {
|
|
return Container(
|
|
color: $styles.colors.black,
|
|
child: SafeArea(
|
|
bottom: false,
|
|
child: Stack(
|
|
children: [
|
|
Positioned.fill(
|
|
top: $styles.insets.lg,
|
|
child: context.isLandscape ? _buildLandscape() : _buildPortrait(),
|
|
),
|
|
Positioned(
|
|
right: $styles.insets.lg,
|
|
top: $styles.insets.lg,
|
|
child: CircleIconBtn(
|
|
icon: AppIcons.timeline,
|
|
onPressed: handleTimelineBtnPressed,
|
|
semanticLabel: $strings.eventsListButtonOpenGlobal)),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
});
|
|
}
|
|
|
|
/// Landscape layout is a row, with the WonderImage on left and events on the right
|
|
Widget _buildLandscape() {
|
|
return Row(
|
|
children: [
|
|
/// WonderImage w/ Timeline btn sits on the left
|
|
Expanded(
|
|
child: Center(
|
|
child: SizedBox(
|
|
width: $styles.sizes.maxContentWidth3,
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Gap($styles.insets.lg),
|
|
Expanded(child: Center(child: _WonderImageWithTimeline(data: _data, height: 500))),
|
|
Gap($styles.insets.lg),
|
|
SizedBox(width: 300, child: _TimelineBtn(type: type)),
|
|
Gap($styles.insets.xl),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
/// Scrolling event list
|
|
Expanded(
|
|
child: Center(
|
|
child: SizedBox(
|
|
width: $styles.sizes.maxContentWidth1,
|
|
child: _EventsList(data: _data, topHeight: 100, blurOnScroll: false),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
/// Portrait layout is a stack with the list scrolling overtop of the WonderImage
|
|
Widget _buildPortrait() {
|
|
return LayoutBuilder(builder: (_, constraints) {
|
|
double topHeight = max(constraints.maxHeight * .55, 200);
|
|
return Center(
|
|
child: SizedBox(
|
|
width: $styles.sizes.maxContentWidth3,
|
|
child: Stack(
|
|
children: [
|
|
/// Top content, sits underneath scrolling list
|
|
_WonderImageWithTimeline(height: topHeight, data: _data),
|
|
|
|
/// Scrolling Events list, takes up the full view
|
|
Column(
|
|
children: [
|
|
Expanded(
|
|
child: _EventsList(data: _data, topHeight: topHeight, blurOnScroll: true, showTopGradient: false),
|
|
),
|
|
Gap($styles.insets.lg),
|
|
SizedBox(width: $styles.sizes.maxContentWidth3, child: _TimelineBtn(type: _data.type)),
|
|
Gap($styles.insets.xl),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
});
|
|
}
|
|
}
|