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

Add artifact details hz mode

Browse Source
This commit is contained in:
Shawn 2022-10-25 00:47:05 -06:00
parent 773865fe44
commit 90bf9df397
2 changed files with 96 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
lib/ui/screens/artifact/artifact_details/artifact_details_screen.dart
View File

@ -22,6 +22,7 @@ class _ArtifactDetailsScreenState extends State<ArtifactDetailsScreen> {
@override
Widget build(BuildContext context) {
bool hzMode = context.isLandscape;
return ColoredBox(
color: $styles.colors.greyStrong,
child: FutureBuilder<ArtifactData?>(
@ -30,43 +31,28 @@ class _ArtifactDetailsScreenState extends State<ArtifactDetailsScreen> {
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<ArtifactDetailsScreen> {
),
);
}
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();
}
}

101
lib/ui/screens/artifact/artifact_details/widgets/_content.dart
View File

@ -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),
],
),
),
);
}