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

Update timeline view to have a max width for the scrolling area

Browse Source
This commit is contained in:
Shawn 2022-10-27 10:26:43 -06:00
parent 048dae8ce8
commit 9a27803d67
2 changed files with 93 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/ui/screens/timeline/widgets/_event_popups.dart
View File

@ -50,7 +50,7 @@ class _EventPopupsState extends State<_EventPopups> {
key: ValueKey(_eventToShow?.year), key: ValueKey(_eventToShow?.year),
child: IntrinsicHeight( child: IntrinsicHeight(
child: SizedBox( child: SizedBox(
width: 600, width: $styles.sizes.maxContentWidth3,
child: Padding( child: Padding(
padding: EdgeInsets.all($styles.insets.md), padding: EdgeInsets.all($styles.insets.md),
child: TimelineEventCard( child: TimelineEventCard(

35
lib/ui/screens/timeline/widgets/_scrolling_viewport.dart
View File

@ -24,6 +24,7 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
late final _ScrollingViewportController controller = _ScrollingViewportController(this); late final _ScrollingViewportController controller = _ScrollingViewportController(this);
static const double _minTimelineSize = 100; static const double _minTimelineSize = 100;
final _currentEventMarker = ValueNotifier<TimelineEvent?>(null); final _currentEventMarker = ValueNotifier<TimelineEvent?>(null);
@override @override
void initState() { void initState() {
super.initState(); super.initState();
@ -44,26 +45,19 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return LayoutBuilder(builder: (_, constraints) {
// cache constraints, so they can be used to maintain the selected year while zooming
controller._constraints = constraints;
double vtPadding = constraints.maxHeight / 2;
double size = controller.calculateContentHeight();
return GestureDetector( return GestureDetector(
// Handle pinch to zoom // Handle pinch to zoom
onScaleUpdate: controller._handleScaleUpdate, onScaleUpdate: controller._handleScaleUpdate,
onScaleStart: controller._handleScaleStart, onScaleStart: controller._handleScaleStart,
behavior: HitTestBehavior.translucent, behavior: HitTestBehavior.translucent,
// Fade in entire view when first shown // Fade in entire view when first shown
child: Animate(
effects: const [FadeEffect()],
child: Stack( child: Stack(
children: [ children: [
Column( Column(
children: [ children: [
/// Main scrolling area, holds the year markers, and the [WondersTimelineBuilder] /// Main scrolling area, holds the year markers, and the [WondersTimelineBuilder]
Expanded( Expanded(
child: _buildScrollingArea(vtPadding, size, context, constraints), child: _buildScrollingArea(context),
), ),
Gap($styles.insets.xs), Gap($styles.insets.xs),
@ -71,7 +65,7 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
_buildAnimatedEraText(context), _buildAnimatedEraText(context),
Gap($styles.insets.xs), Gap($styles.insets.xs),
], ],
), ).animate().fadeIn(),
/// Dashed line with a year that changes as we scroll /// Dashed line with a year that changes as we scroll
IgnorePointer( IgnorePointer(
@ -85,9 +79,7 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
), ),
], ],
), ),
),
); );
});
} }
AnimatedBuilder _buildAnimatedEraText(BuildContext context) { AnimatedBuilder _buildAnimatedEraText(BuildContext context) {
@ -107,7 +99,7 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
}); });
} }
Widget _buildScrollingArea(double vtPadding, double size, BuildContext context, BoxConstraints constraints) { Widget _buildScrollingArea(BuildContext context) {
// Builds a TimelineSection, and passes it the currently selected yr based on scroll position. // Builds a TimelineSection, and passes it the currently selected yr based on scroll position.
// Rebuilds when timeline is scrolled. // Rebuilds when timeline is scrolled.
Widget buildTimelineSection(WonderData data) { Widget buildTimelineSection(WonderData data) {
@ -124,15 +116,23 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
); );
} }
return LayoutBuilder(
builder: (_, constraints) {
// cache constraints, so they can be used to maintain the selected year while zooming
controller._constraints = constraints;
double vtPadding = constraints.maxHeight / 2;
double size = controller.calculateContentHeight();
final contentSize = min($styles.sizes.maxContentWidth2, constraints.maxWidth);
return Stack( return Stack(
children: [ children: [
SingleChildScrollView( SingleChildScrollView(
controller: controller.scroller, controller: controller.scroller,
padding: EdgeInsets.symmetric(vertical: vtPadding), padding: EdgeInsets.symmetric(vertical: vtPadding),
// A stack inside a SizedBox which sets its overall height // A stack inside a SizedBox which sets its overall height
child: Center(
child: SizedBox( child: SizedBox(
height: size, height: size,
width: double.infinity, width: contentSize,
child: Stack( child: Stack(
children: [ children: [
/// Year Markers /// Year Markers
@ -143,11 +143,13 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
left: 100, left: 100,
right: $styles.insets.sm, right: $styles.insets.sm,
child: FocusTraversalGroup( child: FocusTraversalGroup(
//child: Placeholder(),
child: WondersTimelineBuilder( child: WondersTimelineBuilder(
axis: Axis.vertical, axis: Axis.vertical,
crossAxisGap: max(6, (constraints.maxWidth - (120 * 3)) / 2), crossAxisGap: max(6, (contentSize - (120 * 3)) / 2),
minSize: _minTimelineSize, minSize: _minTimelineSize,
timelineBuilder: (_, data, __) => buildTimelineSection(data)), timelineBuilder: (_, data, __) => buildTimelineSection(data),
),
), ),
), ),
@ -163,6 +165,7 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
), ),
), ),
), ),
),
/// Top and bottom gradients for visual style /// Top and bottom gradients for visual style
ListOverscollGradient(), ListOverscollGradient(),
@ -178,5 +181,7 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
}) })
], ],
); );
},
);
} }
} }