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

Set aspectRatio of map, update gap to avoid rendering issue with 1px hz line on bottom of scroll area

Browse Source
This commit is contained in:
Shawn 2023-01-03 10:04:01 -07:00
parent 989ba4b9c4
commit bb598ddf6a
2 changed files with 24 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,7 +21,6 @@ import 'package:wonders/ui/common/scaling_list_item.dart';
import 'package:wonders/ui/common/static_text_scale.dart';
import 'package:wonders/ui/common/themed_text.dart';
import 'package:wonders/ui/common/utils/context_utils.dart';
import 'package:wonders/ui/wonder_illustrations/common/animated_clouds.dart';
import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration.dart';
import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration_config.dart';
import 'package:wonders/ui/wonder_illustrations/common/wonder_title_text.dart';
@ -37,10 +36,6 @@ part 'widgets/_sliding_image_stack.dart';
part 'widgets/_title_text.dart';
part 'widgets/_top_illustration.dart';
//TODO: Try and maintain 1.5 : 1 aspect ratio on the featured image
//TODO: Try and move the scrollbar all the way to the edge of the screen
//TODO: Fix arch logic (if necessary)
// or maybe remove
class WonderEditorialScreen extends StatefulWidget {
const WonderEditorialScreen(this.data, {Key? key, required this.onScroll}) : super(key: key);
final WonderData data;
@ -75,7 +70,7 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
double minAppBarHeight = shortMode ? 80 : 150;
/// Attempt to maintain a similar aspect ratio for the image within the app-bar
double maxAppBarHeight = min(context.widthPx, $styles.sizes.maxContentWidth1) * 1.5;
double maxAppBarHeight = min(context.widthPx, $styles.sizes.maxContentWidth1) * 1.2;
return PopRouterOnOverScroll(
controller: _scroller,
@ -147,17 +142,12 @@ class _WonderEditorialScreenState extends State<WonderEditorialScreen> {
widget.data.type,
scrollPos: _scrollPos,
sectionIndex: _sectionIndex,
).animate().fade(duration: $styles.times.med, delay: $styles.times.pageTransition),
),
),
),
/// Editorial content (text and images)
_ScrollingContent(widget.data, scrollPos: _scrollPos, sectionNotifier: _sectionIndex),
/// Bottom padding
SliverToBoxAdapter(
child: Container(height: 150, color: $styles.colors.offWhite),
),
],
),
),

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

@ -134,9 +134,10 @@ class _ScrollingContent extends StatelessWidget {
buildText(data.locationInfo2),
]),
Gap($styles.insets.md),
_MapsThumbnail(data, height: 400),
AspectRatio(aspectRatio: 1.65, child: _MapsThumbnail(data)),
Gap($styles.insets.md),
..._contentSection([Center(child: buildHiddenCollectible(slot: 3))]),
Gap(150),
]),
),
),
@ -214,9 +215,8 @@ class _YouTubeThumbnail extends StatelessWidget {
}
class _MapsThumbnail extends StatefulWidget {
const _MapsThumbnail(this.data, {Key? key, required this.height}) : super(key: key);
const _MapsThumbnail(this.data, {Key? key}) : super(key: key);
final WonderData data;
final double height;
@override
State<_MapsThumbnail> createState() => _MapsThumbnailState();
@ -232,30 +232,27 @@ class _MapsThumbnailState extends State<_MapsThumbnail> {
return MergeSemantics(
child: Column(
children: [
SizedBox(
height: widget.height,
child: ClipRRect(
borderRadius: BorderRadius.circular($styles.corners.md),
child: AppBtn.basic(
semanticLabel: $strings.scrollingContentSemanticOpen,
onPressed: handlePressed,
ClipRRect(
borderRadius: BorderRadius.circular($styles.corners.md),
child: AppBtn.basic(
semanticLabel: $strings.scrollingContentSemanticOpen,
onPressed: handlePressed,
/// To prevent the map widget from absorbing the onPressed action, use a Stack + IgnorePointer + a transparent Container
child: Stack(
children: [
Positioned.fill(child: ColoredBox(color: Colors.transparent)),
IgnorePointer(
child: GoogleMap(
markers: {getMapsMarker(startPos.target)},
zoomControlsEnabled: false,
mapType: MapType.normal,
mapToolbarEnabled: false,
initialCameraPosition: startPos,
myLocationButtonEnabled: false,
),
/// To prevent the map widget from absorbing the onPressed action, use a Stack + IgnorePointer + a transparent Container
child: Stack(
children: [
Positioned.fill(child: ColoredBox(color: Colors.transparent)),
IgnorePointer(
child: GoogleMap(
markers: {getMapsMarker(startPos.target)},
zoomControlsEnabled: false,
mapType: MapType.normal,
mapToolbarEnabled: false,
initialCameraPosition: startPos,
myLocationButtonEnabled: false,
),
],
),
),
],
),
),
),