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';
/// Replacement for the built in [AnimatedBuilder] because that name is semantically confusing.
class ListenableBuilder extends AnimatedBuilder {
const ListenableBuilder({
Key? key,
super.key,
required Listenable listenable,
required TransitionBuilder builder,
Widget? child,
}) : super(key: key, animation: listenable, builder: builder, child: child);
required super.builder,
super.child,
}) : super(animation: listenable);
}

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

@ -1,6 +1,7 @@
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/data/collectible_data.dart';
import 'package:particle_field/particle_field.dart';
import 'package:wonders/ui/common/centered_box.dart';
part 'widgets/_animated_ribbon.dart';
part 'widgets/_celebration_particles.dart';
@ -51,8 +52,7 @@ class CollectibleFoundScreen extends StatelessWidget {
Animate().custom(duration: t, builder: (context, ratio, _) => _buildGradient(context, 1, ratio)),
_CelebrationParticles(fadeMs: (t * 6).inMilliseconds),
SafeArea(
child: Center(
child: SizedBox(
child: CenteredBox(
width: $styles.sizes.maxContentWidth3,
child: Column(
children: [
@ -78,7 +78,6 @@ class CollectibleFoundScreen extends StatelessWidget {
),
),
),
),
BackBtn.close().safe().animate().fade(delay: t * 4, duration: t * 2),
]);
}

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/data/collectible_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/modals/app_modals.dart';

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

@ -24,8 +24,7 @@ class _CollectionFooter extends StatelessWidget {
color: $styles.colors.greyStrong,
child: SafeArea(
top: false,
child: Center(
child: SizedBox(
child: CenteredBox(
width: $styles.sizes.maxContentWidth1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
@ -38,7 +37,6 @@ class _CollectionFooter extends StatelessWidget {
),
),
),
),
)
]);
}

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/ui/common/app_icons.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/curved_clippers.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
return MergeSemantics(
child: Padding(
child: CenteredBox(
padding: EdgeInsets.symmetric(vertical: outerPadding),
width: 450,
child: Stack(
children: [
Container(

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

@ -8,7 +8,7 @@ class _SlidingImageStack extends StatelessWidget {
@override
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}) {
return Container(
width: totalSize.width * scale,
@ -24,11 +24,10 @@ class _SlidingImageStack extends StatelessWidget {
}
return ExcludeSemantics(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
child: CenteredBox(
width: totalSize.width,
height: totalSize.height,
padding: const EdgeInsets.all(8.0),
child: ValueListenableBuilder(
valueListenable: scrollPos,
builder: (context, value, child) {
@ -41,26 +40,6 @@ class _SlidingImageStack extends StatelessWidget {
}
return Stack(
children: [
Center(
child: FractionalTranslation(
translation: Offset(0, 0.05 * pctVisible),
child: Transform(
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(
translation: Offset(0, -.1 + .2 * pctVisible),
@ -87,7 +66,6 @@ class _SlidingImageStack extends StatelessWidget {
},
),
),
),
);
}
}

6
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/wonder_data.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/dashed_line.dart';
import 'package:wonders/ui/common/list_gradient.dart';
@ -76,7 +77,9 @@ class _TimelineScreenState extends State<TimelineScreen> {
/// Mini Horizontal timeline, reacts to the state of the larger scrolling timeline,
/// and changes the timelines scroll position on Hz drag
Padding(
CenteredBox(
width: $styles.sizes.maxContentWidth1,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: $styles.insets.lg),
child: _BottomScrubber(
_scroller,
@ -85,6 +88,7 @@ class _TimelineScreenState extends State<TimelineScreen> {
selectedWonder: widget.type,
),
),
),
Gap($styles.insets.lg),
],
),

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

@ -29,9 +29,12 @@ class _BottomScrubber extends StatelessWidget {
/// It might take a frame until we receive a valid scroller
if (scroller == null) return SizedBox.shrink();
return LayoutBuilder(builder: (context, constraints) {
void handleScrubberPan(DragUpdateDetails details) {
final totalWidth = constraints.maxWidth;
if (!scroller.hasClients) return;
double dragMultiplier = (scroller.position.maxScrollExtent + timelineMinSize) / context.widthPx;
double dragMultiplier = (scroller.position.maxScrollExtent + timelineMinSize) / totalWidth;
double newPos = scroller.position.pixels + details.delta.dx * dragMultiplier;
scroller.position.jumpTo(newPos.clamp(0, scroller.position.maxScrollExtent));
}
@ -90,6 +93,7 @@ class _BottomScrubber extends StatelessWidget {
],
),
);
});
}
Container _buildOutlineBox(BuildContext context, Alignment alignment) {

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

@ -95,18 +95,17 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
// 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);
double height = controller.calculateContentHeight();
final width = min($styles.sizes.maxContentWidth2, constraints.maxWidth);
return Stack(
children: [
SingleChildScrollView(
controller: controller.scroller,
padding: EdgeInsets.symmetric(vertical: vtPadding),
// A stack inside a SizedBox which sets its overall height
child: Center(
child: SizedBox(
height: size,
width: contentSize,
child: CenteredBox(
height: height,
width: width,
child: Stack(
children: [
/// Year Markers
@ -120,7 +119,7 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
//child: Placeholder(),
child: WondersTimelineBuilder(
axis: Axis.vertical,
crossAxisGap: max(6, (contentSize - (120 * 3)) / 2),
crossAxisGap: max(6, (width - (120 * 3)) / 2),
minSize: _minTimelineSize,
timelineBuilder: (_, data, __) => buildTimelineSection(data),
),
@ -139,7 +138,6 @@ class _ScalingViewportState extends State<_ScrollingViewport> {
),
),
),
),
/// Top and bottom gradients for visual style
ListOverscollGradient(),

13
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/ui/common/app_backdrop.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/hidden_collectible.dart';
import 'package:wonders/ui/common/list_gradient.dart';
@ -58,8 +59,7 @@ class WonderEvents extends StatelessWidget {
children: [
/// WonderImage w/ Timeline btn
Expanded(
child: Center(
child: SizedBox(
child: CenteredBox(
width: $styles.sizes.maxContentWidth3,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
@ -74,12 +74,10 @@ class WonderEvents extends StatelessWidget {
),
),
),
),
/// EventsList
Expanded(
child: Center(
child: SizedBox(
child: CenteredBox(
width: $styles.sizes.maxContentWidth1,
child: _EventsList(
data: _data,
@ -88,7 +86,6 @@ class WonderEvents extends StatelessWidget {
),
),
),
),
],
);
}
@ -97,8 +94,7 @@ class WonderEvents extends StatelessWidget {
Widget _buildPortrait() {
return LayoutBuilder(builder: (_, constraints) {
double topHeight = max(constraints.maxHeight * .55, 200);
return Center(
child: SizedBox(
return CenteredBox(
width: $styles.sizes.maxContentWidth3,
child: Stack(
children: [
@ -126,7 +122,6 @@ class WonderEvents extends StatelessWidget {
),
],
),
),
);
});
}

2
pubspec.yaml
View File

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