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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
bool hzMode = context.isLandscape;
return ColoredBox( return ColoredBox(
color: $styles.colors.greyStrong, color: $styles.colors.greyStrong,
child: FutureBuilder<ArtifactData?>( child: FutureBuilder<ArtifactData?>(
@ -30,43 +31,28 @@ class _ArtifactDetailsScreenState extends State<ArtifactDetailsScreen> {
final data = snapshot.data; final data = snapshot.data;
late Widget content; late Widget content;
if (snapshot.hasError || (snapshot.hasData && data == null)) { if (snapshot.hasError || (snapshot.hasData && data == null)) {
content = Column( content = _buildError();
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();
} else if (!snapshot.hasData) { } else if (!snapshot.hasData) {
content = Center(child: AppLoadingIndicator()); content = Center(child: AppLoadingIndicator());
} else { } else {
content = CustomScrollView( content = hzMode
slivers: [ ? Row(children: [
SliverAppBar( Expanded(child: _Header(data: data!)),
pinned: true, Expanded(child: Center(child: SizedBox(width: 600, child: _Content(data: data)))),
elevation: 0, ])
leading: SizedBox.shrink(), : CustomScrollView(
expandedHeight: context.heightPx * .5, slivers: [
collapsedHeight: context.heightPx * .35, SliverAppBar(
flexibleSpace: _Header(data: data!), pinned: true,
), elevation: 0,
SliverToBoxAdapter(child: _Content(data: data)), leading: SizedBox.shrink(),
], expandedHeight: context.heightPx * .5,
); collapsedHeight: context.heightPx * .35,
flexibleSpace: _Header(data: data!),
),
SliverToBoxAdapter(child: _Content(data: data)),
],
);
} }
return Stack(children: [ 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) { Widget build(BuildContext context) {
return Padding( return Padding(
padding: EdgeInsets.symmetric(horizontal: $styles.insets.lg), padding: EdgeInsets.symmetric(horizontal: $styles.insets.lg),
child: Column( child: SingleChildScrollView(
children: [ child: Column(
Gap($styles.insets.xl), mainAxisSize: MainAxisSize.min,
if (data.culture.isNotEmpty) ...[ children: [
Text( Gap($styles.insets.xl),
data.culture.toUpperCase(), if (data.culture.isNotEmpty) ...[
style: $styles.text.titleFont.copyWith(color: $styles.colors.accent1), Text(
).animate().fade(delay: 150.ms, duration: 600.ms), data.culture.toUpperCase(),
Gap($styles.insets.xs), style: $styles.text.titleFont.copyWith(color: $styles.colors.accent1),
], ).animate().fade(delay: 150.ms, duration: 600.ms),
Semantics( Gap($styles.insets.xs),
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),
], ],
), Semantics(
Gap($styles.insets.md), header: true,
Text( child: Text(
$strings.homeMenuAboutMet, data.title,
style: $styles.text.caption.copyWith(color: $styles.colors.accent2), textAlign: TextAlign.center,
), style: $styles.text.h2.copyWith(color: $styles.colors.offWhite, height: 1.2),
Gap($styles.insets.offset), 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),
],
),
), ),
); );
} }