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

EventsView: switch to two-column layout at aspect ratios > .85

Browse Source
This commit is contained in:
Shawn 2023-01-23 09:07:30 -07:00
parent a0e1e99223
commit 13073d4e02
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,7 @@
import 'dart:io';
import 'package:wonders/common_libs.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/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';
@ -26,6 +29,11 @@ class WonderEvents extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
void handleTimelineBtnPressed() => context.push(ScreenPaths.timeline(type)); void handleTimelineBtnPressed() => context.push(ScreenPaths.timeline(type));
// Main view content switches between 1 and 2 column layouts
// On mobile, use the 2 column layout on screens close to landscape (>.85). This is primarily an optimization for foldable devices square-ish dimensions when opened.
final twoColumnAspect = PlatformInfo.isMobile ? .85 : 1;
bool useTwoColumnLayout = context.mq.size.aspectRatio > twoColumnAspect;
return LayoutBuilder(builder: (context, constraints) { return LayoutBuilder(builder: (context, constraints) {
return Container( return Container(
color: $styles.colors.black, color: $styles.colors.black,
@ -33,10 +41,10 @@ class WonderEvents extends StatelessWidget {
bottom: false, bottom: false,
child: Stack( child: Stack(
children: [ children: [
/// Main view switches between portrait and landscape views /// Main view
Positioned.fill( Positioned.fill(
top: $styles.insets.sm, top: $styles.insets.sm,
child: context.isLandscape ? _buildLandscape(context) : _buildPortrait(), child: useTwoColumnLayout ? _buildTwoColumn(context) : _buildSingleColumn(),
), ),
/// Header w/ TimelineBtn /// Header w/ TimelineBtn
@ -58,7 +66,7 @@ class WonderEvents extends StatelessWidget {
} }
/// Landscape layout is a row, with the WonderImage on left and EventsList on the right /// Landscape layout is a row, with the WonderImage on left and EventsList on the right
Widget _buildLandscape(BuildContext context) { Widget _buildTwoColumn(BuildContext context) {
return Row( return Row(
children: [ children: [
/// WonderImage w/ Timeline btn /// WonderImage w/ Timeline btn
@ -104,7 +112,7 @@ class WonderEvents extends StatelessWidget {
} }
/// Portrait layout is a stack with the EventsList scrolling overtop of the WonderImage /// Portrait layout is a stack with the EventsList scrolling overtop of the WonderImage
Widget _buildPortrait() { Widget _buildSingleColumn() {
return LayoutBuilder(builder: (_, constraints) { return LayoutBuilder(builder: (_, constraints) {
double topHeight = max(constraints.maxHeight * .55, 200); double topHeight = max(constraints.maxHeight * .55, 200);
return CenteredBox( return CenteredBox(

1
release_notes.txt
View File

@ -1,2 +1,3 @@
# 2.0.9 # 2.0.9
- Remember currently selected wonder on home page - Remember currently selected wonder on home page
- EventsView: switch to two-column layout at aspect ratios > .85