diff --git a/lib/ui/screens/artifact/artifact_details/artifact_details_screen.dart b/lib/ui/screens/artifact/artifact_details/artifact_details_screen.dart index 7682a1c3..b9d3fb13 100644 --- a/lib/ui/screens/artifact/artifact_details/artifact_details_screen.dart +++ b/lib/ui/screens/artifact/artifact_details/artifact_details_screen.dart @@ -22,6 +22,7 @@ class _ArtifactDetailsScreenState extends State { @override Widget build(BuildContext context) { + bool hzMode = context.isLandscape; return ColoredBox( color: $styles.colors.greyStrong, child: FutureBuilder( @@ -30,43 +31,28 @@ class _ArtifactDetailsScreenState extends State { final data = snapshot.data; late Widget content; if (snapshot.hasError || (snapshot.hasData && data == null)) { - content = Column( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Center( - child: Icon( - Icons.warning_amber_outlined, - color: $styles.colors.accent1, - size: $styles.insets.lg, - )), - Gap($styles.insets.xs), - SizedBox( - width: $styles.insets.xxl * 3, - child: Text( - StringUtils.supplant($strings.artifactDetailsErrorNotFound, {'{artifactId}': widget.artifactId}), - style: $styles.text.body.copyWith(color: $styles.colors.offWhite), - textAlign: TextAlign.center, - ), - ), - ], - ).animate().fadeIn(); + content = _buildError(); } else if (!snapshot.hasData) { content = Center(child: AppLoadingIndicator()); } else { - content = CustomScrollView( - slivers: [ - SliverAppBar( - pinned: true, - elevation: 0, - leading: SizedBox.shrink(), - expandedHeight: context.heightPx * .5, - collapsedHeight: context.heightPx * .35, - flexibleSpace: _Header(data: data!), - ), - SliverToBoxAdapter(child: _Content(data: data)), - ], - ); + content = hzMode + ? Row(children: [ + Expanded(child: _Header(data: data!)), + Expanded(child: Center(child: SizedBox(width: 600, child: _Content(data: data)))), + ]) + : CustomScrollView( + slivers: [ + SliverAppBar( + pinned: true, + elevation: 0, + leading: SizedBox.shrink(), + expandedHeight: context.heightPx * .5, + collapsedHeight: context.heightPx * .35, + flexibleSpace: _Header(data: data!), + ), + SliverToBoxAdapter(child: _Content(data: data)), + ], + ); } return Stack(children: [ @@ -77,4 +63,28 @@ class _ArtifactDetailsScreenState extends State { ), ); } + + Animate _buildError() { + return Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Center( + child: Icon( + Icons.warning_amber_outlined, + color: $styles.colors.accent1, + size: $styles.insets.lg, + )), + Gap($styles.insets.xs), + SizedBox( + width: $styles.insets.xxl * 3, + child: Text( + StringUtils.supplant($strings.artifactDetailsErrorNotFound, {'{artifactId}': widget.artifactId}), + style: $styles.text.body.copyWith(color: $styles.colors.offWhite), + textAlign: TextAlign.center, + ), + ), + ], + ).animate().fadeIn(); + } } diff --git a/lib/ui/screens/artifact/artifact_details/widgets/_content.dart b/lib/ui/screens/artifact/artifact_details/widgets/_content.dart index 9e81da2c..fb70af62 100644 --- a/lib/ui/screens/artifact/artifact_details/widgets/_content.dart +++ b/lib/ui/screens/artifact/artifact_details/widgets/_content.dart @@ -8,56 +8,59 @@ class _Content extends StatelessWidget { Widget build(BuildContext context) { return Padding( padding: EdgeInsets.symmetric(horizontal: $styles.insets.lg), - child: Column( - children: [ - Gap($styles.insets.xl), - if (data.culture.isNotEmpty) ...[ - Text( - data.culture.toUpperCase(), - style: $styles.text.titleFont.copyWith(color: $styles.colors.accent1), - ).animate().fade(delay: 150.ms, duration: 600.ms), - Gap($styles.insets.xs), - ], - Semantics( - header: true, - child: Text( - data.title, - textAlign: TextAlign.center, - style: $styles.text.h2.copyWith(color: $styles.colors.offWhite, height: 1.2), - maxLines: 5, - overflow: TextOverflow.ellipsis, - ).animate().fade(delay: 250.ms, duration: 600.ms), - ), - Gap($styles.insets.lg), - Animate().toggle( - delay: 500.ms, - builder: (_, value, __) { - return CompassDivider(isExpanded: !value, duration: $styles.times.med); - }), - Gap($styles.insets.lg), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - ...[ - _InfoRow($strings.artifactDetailsLabelDate, data.date), - _InfoRow($strings.artifactDetailsLabelPeriod, data.period), - _InfoRow($strings.artifactDetailsLabelGeography, data.country), - _InfoRow($strings.artifactDetailsLabelMedium, data.medium), - _InfoRow($strings.artifactDetailsLabelDimension, data.dimension), - _InfoRow($strings.artifactDetailsLabelClassification, data.classification), - ] - .animate(interval: 100.ms) - .fade(delay: 600.ms, duration: $styles.times.med) - .slide(begin: Offset(0.2, 0), curve: Curves.easeOut), + child: SingleChildScrollView( + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Gap($styles.insets.xl), + if (data.culture.isNotEmpty) ...[ + Text( + data.culture.toUpperCase(), + style: $styles.text.titleFont.copyWith(color: $styles.colors.accent1), + ).animate().fade(delay: 150.ms, duration: 600.ms), + Gap($styles.insets.xs), ], - ), - Gap($styles.insets.md), - Text( - $strings.homeMenuAboutMet, - style: $styles.text.caption.copyWith(color: $styles.colors.accent2), - ), - Gap($styles.insets.offset), - ], + Semantics( + header: true, + child: Text( + data.title, + textAlign: TextAlign.center, + style: $styles.text.h2.copyWith(color: $styles.colors.offWhite, height: 1.2), + maxLines: 5, + overflow: TextOverflow.ellipsis, + ).animate().fade(delay: 250.ms, duration: 600.ms), + ), + Gap($styles.insets.lg), + Animate().toggle( + delay: 500.ms, + builder: (_, value, __) { + return CompassDivider(isExpanded: !value, duration: $styles.times.med); + }), + Gap($styles.insets.lg), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + ...[ + _InfoRow($strings.artifactDetailsLabelDate, data.date), + _InfoRow($strings.artifactDetailsLabelPeriod, data.period), + _InfoRow($strings.artifactDetailsLabelGeography, data.country), + _InfoRow($strings.artifactDetailsLabelMedium, data.medium), + _InfoRow($strings.artifactDetailsLabelDimension, data.dimension), + _InfoRow($strings.artifactDetailsLabelClassification, data.classification), + ] + .animate(interval: 100.ms) + .fade(delay: 600.ms, duration: $styles.times.med) + .slide(begin: Offset(0.2, 0), curve: Curves.easeOut), + ], + ), + Gap($styles.insets.md), + Text( + $strings.homeMenuAboutMet, + style: $styles.text.caption.copyWith(color: $styles.colors.accent2), + ), + Gap($styles.insets.offset), + ], + ), ), ); }