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

Add centeredBox widget, polish editorial

Browse Source
This commit is contained in:
Shawn 2022-11-14 15:36:34 -07:00
parent 90902e27aa
commit 667108943f
13 changed files with 240 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
lib/ui/common/centered_box.dart Normal file
View File

@ -0,0 +1,20 @@
import 'package:wonders/common_libs.dart';
class CenteredBox extends StatelessWidget {
const CenteredBox({Key? key, required this.child, this.width, this.height, this.padding}) : super(key: key);
final Widget child;
final double? width;
final double? height;
final EdgeInsets? padding;
@override
Widget build(BuildContext context) => Padding(
padding: padding ?? EdgeInsets.zero,
child: Center(
child: SizedBox(
width: width,
height: height,
child: child,
),
),
);
}

9
lib/ui/common/listenable_builder.dart
View File

@ -1,10 +1,11 @@
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
/// Replacement for the built in [AnimatedBuilder] because that name is semantically confusing.
class ListenableBuilder extends AnimatedBuilder { class ListenableBuilder extends AnimatedBuilder {
const ListenableBuilder({ const ListenableBuilder({
Key? key, super.key,
required Listenable listenable, required Listenable listenable,
required TransitionBuilder builder, required super.builder,
Widget? child, super.child,
}) : super(key: key, animation: listenable, builder: builder, child: child); }) : super(animation: listenable);
} }

49
lib/ui/screens/collectible_found/collectible_found_screen.dart
View File

@ -1,6 +1,7 @@
import 'package:wonders/common_libs.dart'; import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/data/collectible_data.dart'; import 'package:wonders/logic/data/collectible_data.dart';
import 'package:particle_field/particle_field.dart'; import 'package:particle_field/particle_field.dart';
import 'package:wonders/ui/common/centered_box.dart';
part 'widgets/_animated_ribbon.dart'; part 'widgets/_animated_ribbon.dart';
part 'widgets/_celebration_particles.dart'; part 'widgets/_celebration_particles.dart';
@ -51,31 +52,29 @@ class CollectibleFoundScreen extends StatelessWidget {
Animate().custom(duration: t, builder: (context, ratio, _) => _buildGradient(context, 1, ratio)), Animate().custom(duration: t, builder: (context, ratio, _) => _buildGradient(context, 1, ratio)),
_CelebrationParticles(fadeMs: (t * 6).inMilliseconds), _CelebrationParticles(fadeMs: (t * 6).inMilliseconds),
SafeArea( SafeArea(
child: Center( child: CenteredBox(
child: SizedBox( width: $styles.sizes.maxContentWidth3,
width: $styles.sizes.maxContentWidth3, child: Column(
child: Column( children: [
children: [ Gap($styles.insets.lg),
Gap($styles.insets.lg), Spacer(),
Spacer(), SizedBox(
SizedBox( height: context.heightPx * .35,
height: context.heightPx * .35, child: Center(child: Hero(tag: 'collectible_image_${collectible.id}', child: _buildImage(context))),
child: Center(child: Hero(tag: 'collectible_image_${collectible.id}', child: _buildImage(context))), ),
), Gap($styles.insets.lg),
Gap($styles.insets.lg), _buildRibbon(context),
_buildRibbon(context), Gap($styles.insets.sm),
Gap($styles.insets.sm), _buildTitle(context, collectible.title, $styles.text.h2, $styles.colors.offWhite, t * 1.5),
_buildTitle(context, collectible.title, $styles.text.h2, $styles.colors.offWhite, t * 1.5), Gap($styles.insets.xs),
Gap($styles.insets.xs), _buildTitle(
_buildTitle( context, collectible.subtitle.toUpperCase(), $styles.text.title2, $styles.colors.accent1, t * 2),
context, collectible.subtitle.toUpperCase(), $styles.text.title2, $styles.colors.accent1, t * 2), Spacer(),
Spacer(), Gap($styles.insets.lg),
Gap($styles.insets.lg), _buildCollectionButton(context),
_buildCollectionButton(context), Gap($styles.insets.lg),
Gap($styles.insets.lg), Spacer(),
Spacer(), ],
],
),
), ),
), ),
), ),

1
lib/ui/screens/collection/collection_screen.dart
View File

@ -5,6 +5,7 @@ import 'package:wonders/logic/collectibles_logic.dart';
import 'package:wonders/logic/common/string_utils.dart'; import 'package:wonders/logic/common/string_utils.dart';
import 'package:wonders/logic/data/collectible_data.dart'; import 'package:wonders/logic/data/collectible_data.dart';
import 'package:wonders/logic/data/wonder_data.dart'; import 'package:wonders/logic/data/wonder_data.dart';
import 'package:wonders/ui/common/centered_box.dart';
import 'package:wonders/ui/common/controls/simple_header.dart'; import 'package:wonders/ui/common/controls/simple_header.dart';
import 'package:wonders/ui/common/modals/app_modals.dart'; import 'package:wonders/ui/common/modals/app_modals.dart';

22
lib/ui/screens/collection/widgets/_collection_footer.dart
View File

@ -24,18 +24,16 @@ class _CollectionFooter extends StatelessWidget {
color: $styles.colors.greyStrong, color: $styles.colors.greyStrong,
child: SafeArea( child: SafeArea(
top: false, top: false,
child: Center( child: CenteredBox(
child: SizedBox( width: $styles.sizes.maxContentWidth1,
width: $styles.sizes.maxContentWidth1, child: Column(
child: Column( crossAxisAlignment: CrossAxisAlignment.stretch,
crossAxisAlignment: CrossAxisAlignment.stretch, children: [
children: [ _buildProgressRow(context),
_buildProgressRow(context), Gap($styles.insets.sm),
Gap($styles.insets.sm), _buildProgressBar(context),
_buildProgressBar(context), Gap($styles.insets.sm),
Gap($styles.insets.sm), ],
],
),
), ),
), ),
), ),

1
lib/ui/screens/editorial/editorial_screen.dart
View File

@ -9,6 +9,7 @@ import 'package:wonders/logic/common/string_utils.dart';
import 'package:wonders/logic/data/wonder_data.dart'; import 'package:wonders/logic/data/wonder_data.dart';
import 'package:wonders/ui/common/app_icons.dart'; import 'package:wonders/ui/common/app_icons.dart';
import 'package:wonders/ui/common/blend_mask.dart'; import 'package:wonders/ui/common/blend_mask.dart';
import 'package:wonders/ui/common/centered_box.dart';
import 'package:wonders/ui/common/compass_divider.dart'; import 'package:wonders/ui/common/compass_divider.dart';
import 'package:wonders/ui/common/curved_clippers.dart'; import 'package:wonders/ui/common/curved_clippers.dart';
import 'package:wonders/ui/common/google_maps_marker.dart'; import 'package:wonders/ui/common/google_maps_marker.dart';

3
lib/ui/screens/editorial/widgets/_collapsing_pull_quote_image.dart
View File

@ -42,8 +42,9 @@ class _CollapsingPullQuoteImage extends StatelessWidget {
// The sized boxes in the column collapse to a zero height, allowing the quotes to naturally sit over top of the image // The sized boxes in the column collapse to a zero height, allowing the quotes to naturally sit over top of the image
return MergeSemantics( return MergeSemantics(
child: Padding( child: CenteredBox(
padding: EdgeInsets.symmetric(vertical: outerPadding), padding: EdgeInsets.symmetric(vertical: outerPadding),
width: 450,
child: Stack( child: Stack(
children: [ children: [
Container( Container(

94
lib/ui/screens/editorial/widgets/_sliding_image_stack.dart
View File

@ -8,7 +8,7 @@ class _SlidingImageStack extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final totalSize = Size(280, 400); final totalSize = Size(400, 600);
Container buildPhoto(double scale, String url, Alignment align, {bool top = true}) { Container buildPhoto(double scale, String url, Alignment align, {bool top = true}) {
return Container( return Container(
width: totalSize.width * scale, width: totalSize.width * scale,
@ -24,68 +24,46 @@ class _SlidingImageStack extends StatelessWidget {
} }
return ExcludeSemantics( return ExcludeSemantics(
child: Padding( child: CenteredBox(
width: totalSize.width,
height: totalSize.height,
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
child: SizedBox( child: ValueListenableBuilder(
width: totalSize.width, valueListenable: scrollPos,
height: totalSize.height, builder: (context, value, child) {
child: ValueListenableBuilder( double pctVisible = 0;
valueListenable: scrollPos, final yPos = ContextUtils.getGlobalPos(context)?.dy;
builder: (context, value, child) { final height = ContextUtils.getSize(context)?.height;
double pctVisible = 0; if (yPos != null && height != null) {
final yPos = ContextUtils.getGlobalPos(context)?.dy; final amtVisible = context.heightPx - yPos;
final height = ContextUtils.getSize(context)?.height; pctVisible = (amtVisible / height).clamp(0, 3);
if (yPos != null && height != null) { }
final amtVisible = context.heightPx - yPos; return Stack(
pctVisible = (amtVisible / height).clamp(0, 3); children: [
} TopRight(
return Stack( child: FractionalTranslation(
children: [ translation: Offset(0, -.1 + .2 * pctVisible),
Center( child: buildPhoto(
child: FractionalTranslation( .73,
translation: Offset(0, 0.05 * pctVisible), type.photo3,
child: Transform( Alignment(0, -.3 + .6 * pctVisible),
alignment: Alignment.center, //origin: Offset(100, 100)
transform: Matrix4.rotationZ(0.9),
child: Container(
width: context.widthPx / 1.75,
height: context.widthPx,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.elliptical(200, 300)),
border: Border.all(
color: $styles.colors.accent2,
width: 1,
),
),
),
),
), ),
), ),
TopRight( ),
child: FractionalTranslation( BottomLeft(
translation: Offset(0, -.1 + .2 * pctVisible), child: FractionalTranslation(
child: buildPhoto( translation: Offset(0, -.14 * pctVisible),
.73, child: buildPhoto(
type.photo3, .45,
Alignment(0, -.3 + .6 * pctVisible), type.photo4,
), Alignment(0, .3 - .6 * pctVisible),
top: false,
), ),
), ),
BottomLeft( ),
child: FractionalTranslation( ],
translation: Offset(0, -.14 * pctVisible), );
child: buildPhoto( },
.45,
type.photo4,
Alignment(0, .3 - .6 * pctVisible),
top: false,
),
),
),
],
);
},
),
), ),
), ),
); );

18
lib/ui/screens/timeline/timeline_screen.dart
View File

@ -8,6 +8,7 @@ import 'package:wonders/logic/common/string_utils.dart';
import 'package:wonders/logic/data/timeline_data.dart'; import 'package:wonders/logic/data/timeline_data.dart';
import 'package:wonders/logic/data/wonder_data.dart'; import 'package:wonders/logic/data/wonder_data.dart';
import 'package:wonders/ui/common/blend_mask.dart'; import 'package:wonders/ui/common/blend_mask.dart';
import 'package:wonders/ui/common/centered_box.dart';
import 'package:wonders/ui/common/controls/simple_header.dart'; import 'package:wonders/ui/common/controls/simple_header.dart';
import 'package:wonders/ui/common/dashed_line.dart'; import 'package:wonders/ui/common/dashed_line.dart';
import 'package:wonders/ui/common/list_gradient.dart'; import 'package:wonders/ui/common/list_gradient.dart';
@ -76,13 +77,16 @@ class _TimelineScreenState extends State<TimelineScreen> {
/// Mini Horizontal timeline, reacts to the state of the larger scrolling timeline, /// Mini Horizontal timeline, reacts to the state of the larger scrolling timeline,
/// and changes the timelines scroll position on Hz drag /// and changes the timelines scroll position on Hz drag
Padding( CenteredBox(
padding: EdgeInsets.symmetric(horizontal: $styles.insets.lg), width: $styles.sizes.maxContentWidth1,
child: _BottomScrubber( child: Padding(
_scroller, padding: EdgeInsets.symmetric(horizontal: $styles.insets.lg),
size: scrubberSize, child: _BottomScrubber(
timelineMinSize: minSize, _scroller,
selectedWonder: widget.type, size: scrubberSize,
timelineMinSize: minSize,
selectedWonder: widget.type,
),
), ),
), ),
Gap($styles.insets.lg), Gap($styles.insets.lg),

110
lib/ui/screens/timeline/widgets/_bottom_scrubber.dart
View File

@ -29,67 +29,71 @@ class _BottomScrubber extends StatelessWidget {
/// It might take a frame until we receive a valid scroller /// It might take a frame until we receive a valid scroller
if (scroller == null) return SizedBox.shrink(); if (scroller == null) return SizedBox.shrink();
void handleScrubberPan(DragUpdateDetails details) {
if (!scroller.hasClients) return;
double dragMultiplier = (scroller.position.maxScrollExtent + timelineMinSize) / context.widthPx;
double newPos = scroller.position.pixels + details.delta.dx * dragMultiplier;
scroller.position.jumpTo(newPos.clamp(0, scroller.position.maxScrollExtent));
}
return SizedBox( return LayoutBuilder(builder: (context, constraints) {
height: size, void handleScrubberPan(DragUpdateDetails details) {
child: Stack( final totalWidth = constraints.maxWidth;
children: [ if (!scroller.hasClients) return;
/// Timeline background double dragMultiplier = (scroller.position.maxScrollExtent + timelineMinSize) / totalWidth;
Container( double newPos = scroller.position.pixels + details.delta.dx * dragMultiplier;
padding: EdgeInsets.all($styles.insets.md), scroller.position.jumpTo(newPos.clamp(0, scroller.position.maxScrollExtent));
decoration: BoxDecoration( }
color: $styles.colors.greyStrong,
borderRadius: BorderRadius.circular($styles.corners.md), return SizedBox(
height: size,
child: Stack(
children: [
/// Timeline background
Container(
padding: EdgeInsets.all($styles.insets.md),
decoration: BoxDecoration(
color: $styles.colors.greyStrong,
borderRadius: BorderRadius.circular($styles.corners.md),
),
child: WondersTimelineBuilder(
crossAxisGap: 4,
selectedWonders: selectedWonder != null ? [selectedWonder!] : [],
),
), ),
child: WondersTimelineBuilder(
crossAxisGap: 4,
selectedWonders: selectedWonder != null ? [selectedWonder!] : [],
),
),
/// Visible area, follows the position of scroller /// Visible area, follows the position of scroller
ListenableBuilder( ListenableBuilder(
listenable: scroller, listenable: scroller,
builder: (_, __) { builder: (_, __) {
ScrollPosition? pos; ScrollPosition? pos;
if (scroller.hasClients) pos = scroller.position; if (scroller.hasClients) pos = scroller.position;
// Get current scroll offset and move the viewport to match // Get current scroll offset and move the viewport to match
double scrollFraction = _calculateScrollFraction(pos); double scrollFraction = _calculateScrollFraction(pos);
double viewPortFraction = _calculateViewPortFraction(pos); double viewPortFraction = _calculateViewPortFraction(pos);
final scrubberAlign = Alignment(-1 + scrollFraction * 2, 0); final scrubberAlign = Alignment(-1 + scrollFraction * 2, 0);
return Positioned.fill( return Positioned.fill(
child: Semantics( child: Semantics(
container: true, container: true,
slider: true, slider: true,
label: $strings.bottomScrubberSemanticTimeline, label: $strings.bottomScrubberSemanticTimeline,
child: GestureDetector( child: GestureDetector(
behavior: HitTestBehavior.translucent, behavior: HitTestBehavior.translucent,
onPanUpdate: handleScrubberPan, onPanUpdate: handleScrubberPan,
/// Scrub area /// Scrub area
child: Align( child: Align(
alignment: scrubberAlign, alignment: scrubberAlign,
child: FractionallySizedBox( child: FractionallySizedBox(
widthFactor: viewPortFraction, widthFactor: viewPortFraction,
heightFactor: 1, heightFactor: 1,
child: _buildOutlineBox(context, scrubberAlign), child: _buildOutlineBox(context, scrubberAlign),
),
), ),
), ),
), ),
), );
); },
}, )
) ],
], ),
), );
); });
} }
Container _buildOutlineBox(BuildContext context, Alignment alignment) { Container _buildOutlineBox(BuildContext context, Alignment alignment) {

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

@ -95,48 +95,46 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
// cache constraints, so they can be used to maintain the selected year while zooming // cache constraints, so they can be used to maintain the selected year while zooming
controller._constraints = constraints; controller._constraints = constraints;
double vtPadding = constraints.maxHeight / 2; double vtPadding = constraints.maxHeight / 2;
double size = controller.calculateContentHeight(); double height = controller.calculateContentHeight();
final contentSize = min($styles.sizes.maxContentWidth2, constraints.maxWidth); final width = 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: CenteredBox(
child: SizedBox( height: height,
height: size, width: width,
width: contentSize, child: Stack(
child: Stack( children: [
children: [ /// Year Markers
/// Year Markers _YearMarkers(),
_YearMarkers(),
/// individual timeline sections /// individual timeline sections
Positioned.fill( Positioned.fill(
left: 100, left: 100,
right: $styles.insets.sm, right: $styles.insets.sm,
child: FocusTraversalGroup( child: FocusTraversalGroup(
//child: Placeholder(), //child: Placeholder(),
child: WondersTimelineBuilder( child: WondersTimelineBuilder(
axis: Axis.vertical, axis: Axis.vertical,
crossAxisGap: max(6, (contentSize - (120 * 3)) / 2), crossAxisGap: max(6, (width - (120 * 3)) / 2),
minSize: _minTimelineSize, minSize: _minTimelineSize,
timelineBuilder: (_, data, __) => buildTimelineSection(data), timelineBuilder: (_, data, __) => buildTimelineSection(data),
),
), ),
), ),
),
/// Event Markers, rebuilds on scroll /// Event Markers, rebuilds on scroll
ListenableBuilder( ListenableBuilder(
listenable: controller.scroller, listenable: controller.scroller,
builder: (_, __) => _EventMarkers( builder: (_, __) => _EventMarkers(
controller.calculateYearFromScrollPos(), controller.calculateYearFromScrollPos(),
onEventChanged: _handleEventMarkerChanged, onEventChanged: _handleEventMarkerChanged,
),
), ),
], ),
), ],
), ),
), ),
), ),

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

@ -3,6 +3,7 @@ import 'package:wonders/logic/common/string_utils.dart';
import 'package:wonders/logic/data/wonder_data.dart'; import 'package:wonders/logic/data/wonder_data.dart';
import 'package:wonders/ui/common/app_backdrop.dart'; import 'package:wonders/ui/common/app_backdrop.dart';
import 'package:wonders/ui/common/app_icons.dart'; import 'package:wonders/ui/common/app_icons.dart';
import 'package:wonders/ui/common/centered_box.dart';
import 'package:wonders/ui/common/curved_clippers.dart'; import 'package:wonders/ui/common/curved_clippers.dart';
import 'package:wonders/ui/common/hidden_collectible.dart'; import 'package:wonders/ui/common/hidden_collectible.dart';
import 'package:wonders/ui/common/list_gradient.dart'; import 'package:wonders/ui/common/list_gradient.dart';
@ -58,34 +59,30 @@ class WonderEvents extends StatelessWidget {
children: [ children: [
/// WonderImage w/ Timeline btn /// WonderImage w/ Timeline btn
Expanded( Expanded(
child: Center( child: CenteredBox(
child: SizedBox( width: $styles.sizes.maxContentWidth3,
width: $styles.sizes.maxContentWidth3, child: Column(
child: Column( mainAxisAlignment: MainAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min,
mainAxisSize: MainAxisSize.min, children: [
children: [ Gap($styles.insets.lg),
Gap($styles.insets.lg), Expanded(child: Center(child: _WonderImageWithTimeline(data: _data, height: 500))),
Expanded(child: Center(child: _WonderImageWithTimeline(data: _data, height: 500))), Gap($styles.insets.lg),
Gap($styles.insets.lg), SizedBox(width: 300, child: _TimelineBtn(type: type)),
SizedBox(width: 300, child: _TimelineBtn(type: type)), Gap($styles.insets.xl),
Gap($styles.insets.xl), ],
],
),
), ),
), ),
), ),
/// EventsList /// EventsList
Expanded( Expanded(
child: Center( child: CenteredBox(
child: SizedBox( width: $styles.sizes.maxContentWidth1,
width: $styles.sizes.maxContentWidth1, child: _EventsList(
child: _EventsList( data: _data,
data: _data, topHeight: 100,
topHeight: 100, blurOnScroll: false,
blurOnScroll: false,
),
), ),
), ),
), ),
@ -97,35 +94,33 @@ class WonderEvents extends StatelessWidget {
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);
return Center( return CenteredBox(
child: SizedBox( width: $styles.sizes.maxContentWidth3,
width: $styles.sizes.maxContentWidth3, child: Stack(
child: Stack( children: [
children: [ /// Top content, sits underneath scrolling list
/// Top content, sits underneath scrolling list _WonderImageWithTimeline(height: topHeight, data: _data),
_WonderImageWithTimeline(height: topHeight, data: _data),
/// EventsList + TimelineBtn /// EventsList + TimelineBtn
Column( Column(
children: [ children: [
Expanded( Expanded(
/// List /// List
child: _EventsList( child: _EventsList(
data: _data, data: _data,
topHeight: topHeight, topHeight: topHeight,
blurOnScroll: true, blurOnScroll: true,
showTopGradient: false, showTopGradient: false,
),
), ),
Gap($styles.insets.lg), ),
Gap($styles.insets.lg),
/// Btn /// Btn
_TimelineBtn(type: _data.type, width: $styles.sizes.maxContentWidth3), _TimelineBtn(type: _data.type, width: $styles.sizes.maxContentWidth3),
Gap($styles.insets.xl), Gap($styles.insets.xl),
], ],
), ),
], ],
),
), ),
); );
}); });

2
pubspec.yaml
View File

@ -4,7 +4,7 @@ publish_to: "none"
version: 1.9.7 version: 1.9.7
environment: environment:
sdk: ">=2.16.0 <3.0.0" sdk: ">=2.17.0 <3.0.0"
dependencies: dependencies:
flutter: flutter: