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

Polish editorial screen

Browse Source
This commit is contained in:
Shawn 2022-11-30 13:30:56 -07:00
parent fd0a044a8f
commit bd3a87edd9
8 changed files with 157 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
lib/ui/common/curved_clippers.dart
View File

@ -39,7 +39,7 @@ class ArchPoint {
}
List<ArchPoint> _getArchPts(Size size, ArchType type) {
double distanceFromTop = 100;
double distanceFromTop = size.width / 3;
switch (type) {
case ArchType.pyramid:
return [
@ -60,19 +60,19 @@ List<ArchPoint> _getArchPts(Size size, ArchType type) {
case ArchType.arch:
return [
ArchPoint(Offset(0, size.height)),
ArchPoint(Offset(0, distanceFromTop * 2)),
ArchPoint(Offset(0, size.width / 2)),
ArchPoint(Offset(size.width / 2, 0), Offset(0, 0)),
ArchPoint(Offset(size.width, distanceFromTop * 2), Offset(size.width, 0)),
ArchPoint(Offset(size.width, size.width / 2), Offset(size.width, 0)),
ArchPoint(Offset(size.width, size.height)),
];
case ArchType.wideArch:
return [
ArchPoint(Offset(0, size.height)),
ArchPoint(Offset(0, distanceFromTop * 2)),
ArchPoint(Offset(0, size.width / 2)),
ArchPoint(Offset(0, distanceFromTop)),
ArchPoint(Offset(size.width / 2, 0), Offset(0, 0)),
ArchPoint(Offset(size.width, distanceFromTop), Offset(size.width, 0)),
ArchPoint(Offset(size.width, distanceFromTop * 2)),
ArchPoint(Offset(size.width, size.width / 2)),
ArchPoint(Offset(size.width, size.height)),
];
case ArchType.flatPyramid:

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

@ -160,7 +160,6 @@ class CollectibleFoundScreen extends StatelessWidget {
return AppBtn.from(
text: $strings.collectibleFoundButtonViewCollection,
isSecondary: true,
expand: true,
onPressed: () => _handleViewCollectionPressed(context),
)
.animate()

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

@ -5,6 +5,7 @@ import 'package:flutter/rendering.dart';
import 'package:flutter_circular_text/circular_text.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:wonders/common_libs.dart';
import 'package:wonders/logic/common/platform_info.dart';
import 'package:wonders/logic/common/string_utils.dart';
import 'package:wonders/logic/data/wonder_data.dart';
import 'package:wonders/ui/common/app_icons.dart';
@ -72,7 +73,9 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
bool shortMode = constraints.biggest.height < 700;
double illustrationHeight = shortMode ? 250 : 280;
double minAppBarHeight = shortMode ? 80 : 120;
double maxAppBarHeight = shortMode ? 400 : 500;
/// Attempt to maintain a similar aspect ratio for the image within the app-bar
double maxAppBarHeight = min(context.widthPx, $styles.sizes.maxContentWidth1) * 1.5;
return PopRouterOnOverScroll(
controller: _scroller,
@ -82,16 +85,7 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
children: [
/// Background
Positioned.fill(
child: ValueListenableBuilder<double>(
valueListenable: _scrollPos,
builder: (_, value, __) {
bool showBg = value < 700;
return AnimatedContainer(
duration: $styles.times.fast,
color: widget.data.type.bgColor.withOpacity(showBg ? 1 : 0),
);
},
),
child: ColoredBox(color: widget.data.type.bgColor),
),
/// Top Illustration - Sits underneath the scrolling content, fades out as it scrolls
@ -112,7 +106,7 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
/// Scrolling content - Includes an invisible gap at the top, and then scrolls over the illustration
TopCenter(
child: SizedBox(
width: $styles.sizes.maxContentWidth1,
//width: $styles.sizes.maxContentWidth1,
child: CustomScrollView(
primary: false,
controller: _scroller,

9
lib/ui/screens/editorial/widgets/_app_bar.dart
View File

@ -47,13 +47,16 @@ class _AppBar extends StatelessWidget {
fit: StackFit.expand,
children: [
AnimatedSwitcher(
duration: $styles.times.fast * .5,
duration: $styles.times.med,
child: Stack(
key: ValueKey(showOverlay),
fit: StackFit.expand,
children: [
/// Masked image
ClipPath(
Center(
child: SizedBox(
width: showOverlay ? double.infinity : $styles.sizes.maxContentWidth1,
child: ClipPath(
// Switch arch type to Rect if we are showing the title bar
clipper: showOverlay ? null : ArchClipper(arch),
child: ValueListenableBuilder<double>(
@ -71,6 +74,8 @@ class _AppBar extends StatelessWidget {
},
),
),
),
),
/// Colored overlay
if (showOverlay) ...[

10
lib/ui/screens/editorial/widgets/_scrolling_content.dart
View File

@ -89,7 +89,11 @@ class _ScrollingContent extends StatelessWidget {
sliver: SliverPadding(
padding: EdgeInsets.symmetric(vertical: $styles.insets.md),
sliver: SliverList(
delegate: SliverChildListDelegate([
delegate: SliverChildListDelegate.fixed([
Center(
child: SizedBox(
width: $styles.sizes.maxContentWidth1,
child: Column(children: [
..._contentSection([
Center(child: buildHiddenCollectible(slot: 0)),
@ -136,6 +140,9 @@ class _ScrollingContent extends StatelessWidget {
]),
),
),
]),
),
),
);
}
@ -221,6 +228,7 @@ class _MapsThumbnailState extends State<_MapsThumbnail> {
@override
Widget build(BuildContext context) {
void handlePressed() => context.push(ScreenPaths.maps(widget.data.type));
if (PlatformInfo.isDesktop) return Placeholder();
return MergeSemantics(
child: Column(
children: [

5
lib/ui/screens/editorial/widgets/_title_text.dart
View File

@ -11,6 +11,9 @@ class _TitleText extends StatelessWidget {
child: DefaultTextColor(
color: $styles.colors.offWhite,
child: StaticTextScale(
child: Center(
child: SizedBox(
width: $styles.sizes.maxContentWidth1,
child: Column(
children: [
Gap($styles.insets.md),
@ -91,6 +94,8 @@ class _TitleText extends StatelessWidget {
),
),
),
),
),
);
}
}

23
lib/ui/screens/wonder_details/wonder_details_tab_menu.dart
View File

@ -125,7 +125,7 @@ class _TabBtn extends StatelessWidget {
final iconImgPath = '${ImagePaths.common}/tab-$iconImg${selected ? '-active' : ''}.png';
String tabLabel = localizations.tabLabel(tabIndex: index + 1, tabCount: tabController.length);
tabLabel = '$label: $tabLabel';
final double btnWidth = (context.widthPx / 6).clamp(80, 120);
final double btnWidth = (context.widthPx / 6).clamp(70, 120);
return MergeSemantics(
child: Semantics(
selected: selected,
@ -136,25 +136,8 @@ class _TabBtn extends StatelessWidget {
onPressed: () => tabController.index = index,
semanticLabel: label,
minimumSize: Size(btnWidth, 0),
child: Stack(
children: [
/// Image icon
Image.asset(iconImgPath, height: 32, width: 32, color: selected ? null : color),
// if (selected)
// Positioned.fill(
// child: BottomCenter(
// child: Transform.translate(
// offset: Offset(0, $styles.insets.xxs),
// child: Animate().custom(
// curve: Curves.easeOutCubic,
// end: 24,
// builder: (_, v, __) => Container(height: 3, width: v, color: $styles.colors.accent1),
// ),
// ),
// ),
// ),
],
),
// Image icon
child: Image.asset(iconImgPath, height: 32, width: 32, color: selected ? null : color),
),
),
),

8
pubspec.lock
View File

@ -1149,10 +1149,10 @@ packages:
dependency: transitive
description:
name: string_scanner
sha256: "556692adab6cfa87322a115640c11f13cb77b3f076ddcc5d6ae3c20242bedcde"
sha256: "862015c5db1f3f3c4ea3b94dc2490363a84262994b88902315ed74be1155612f"
url: "https://pub.dev"
source: hosted
version: "1.2.0"
version: "1.1.1"
sync_http:
dependency: transitive
description:
@ -1173,10 +1173,10 @@ packages:
dependency: transitive
description:
name: test_api
sha256: ad540f65f92caa91bf21dfc8ffb8c589d6e4dc0c2267818b4cc2792857706206
sha256: c9aba3b3dbfe8878845dfab5fa096eb8de7b62231baeeb1cea8e3ee81ca8c6d8
url: "https://pub.dev"
source: hosted
version: "0.4.16"
version: "0.4.15"
timing:
dependency: transitive
description: