Intial pass on collection screen
This commit is contained in:
parent
630a7a38e5
commit
b5157d14ce
@ -76,26 +76,27 @@ class _CollectionScreenState extends State<CollectionScreen> with GetItStateMixi
|
||||
|
||||
return ColoredBox(
|
||||
color: $styles.colors.greyStrong,
|
||||
child: Stack(children: [
|
||||
Positioned.fill(
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
|
||||
SimpleHeader($strings.collectionTitleCollection),
|
||||
_NewlyDiscoveredRow(count: discovered, onPressed: _scrollToTarget),
|
||||
_CollectionList(
|
||||
states: _states,
|
||||
fromId: widget.fromId,
|
||||
scrollKey: _scrollKey,
|
||||
scrollWonder: scrollWonder,
|
||||
onPressed: (o) => _showDetails(context, o),
|
||||
onReset: discovered + explored > 0 ? _handleReset : null,
|
||||
),
|
||||
]),
|
||||
),
|
||||
Positioned.fill(
|
||||
top: null,
|
||||
child: _CollectionFooter(count: discovered + explored, total: total),
|
||||
),
|
||||
]),
|
||||
child: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
|
||||
SimpleHeader($strings.collectionTitleCollection),
|
||||
_NewlyDiscoveredRow(count: discovered, onPressed: _scrollToTarget),
|
||||
Flexible(
|
||||
child: _CollectionList(
|
||||
states: _states,
|
||||
fromId: widget.fromId,
|
||||
scrollKey: _scrollKey,
|
||||
scrollWonder: scrollWonder,
|
||||
onPressed: (o) => _showDetails(context, o),
|
||||
onReset: discovered + explored > 0 ? _handleReset : null,
|
||||
),
|
||||
),
|
||||
]),
|
||||
),
|
||||
_CollectionFooter(count: discovered + explored, total: total),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -10,27 +10,33 @@ class _CollectionFooter extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Stack(children: [
|
||||
Transform.translate(
|
||||
offset: Offset(0, -$styles.insets.xl),
|
||||
child: VtGradient(
|
||||
[$styles.colors.greyStrong.withOpacity(0), $styles.colors.greyStrong],
|
||||
const [0, 1],
|
||||
height: $styles.insets.xl,
|
||||
),
|
||||
),
|
||||
// TODO SB: Maybe restore this gradient? Need to come up with alternate approach since list can now scroll horizontally
|
||||
// Transform.translate(
|
||||
// offset: Offset(0, -$styles.insets.xl),
|
||||
// child: VtGradient(
|
||||
// [$styles.colors.greyStrong.withOpacity(0), $styles.colors.greyStrong],
|
||||
// const [0, 1],
|
||||
// height: $styles.insets.xl,
|
||||
// ),
|
||||
// ),
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(horizontal: $styles.insets.md, vertical: $styles.insets.sm),
|
||||
color: $styles.colors.greyStrong,
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
_buildProgressRow(context),
|
||||
Gap($styles.insets.sm),
|
||||
_buildProgressBar(context),
|
||||
Gap($styles.insets.sm),
|
||||
],
|
||||
child: Center(
|
||||
child: SizedBox(
|
||||
width: $styles.sizes.maxContentWidth1,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
_buildProgressRow(context),
|
||||
Gap($styles.insets.sm),
|
||||
_buildProgressBar(context),
|
||||
Gap($styles.insets.sm),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
|
@ -22,70 +22,90 @@ class _CollectionList extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
List<WonderData> wonders = wondersLogic.all;
|
||||
List<Widget> children = [];
|
||||
for (int i = 0; i < wonders.length; i++) {
|
||||
WonderData data = wonders[i];
|
||||
children.add(_buildCategoryTitle(context, data, data.type == scrollWonder ? scrollKey : null));
|
||||
children.add(Gap($styles.insets.md));
|
||||
children.add(_buildCollectibleRow(context, data.type, states));
|
||||
children.add(Gap($styles.insets.xl));
|
||||
}
|
||||
bool vtMode = context.isLandscape == false;
|
||||
// Create list of collections that is shared by both hz and vt layouts
|
||||
List<Widget> collections = [
|
||||
...wonders.map((d) {
|
||||
return _buildSingleCollection(
|
||||
context,
|
||||
height: vtMode ? 300 : 400,
|
||||
width: vtMode ? null : 600,
|
||||
data: d,
|
||||
);
|
||||
}).toList()
|
||||
];
|
||||
// Scroll view adapts to scroll vertically or horizontally
|
||||
return SingleChildScrollView(
|
||||
scrollDirection: vtMode ? Axis.vertical : Axis.horizontal,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all($styles.insets.lg),
|
||||
child: vtMode
|
||||
? SeparatedColumn(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
separatorBuilder: () => Gap($styles.insets.lg),
|
||||
children: collections,
|
||||
)
|
||||
: SeparatedRow(
|
||||
separatorBuilder: () => Gap($styles.insets.xl * 2),
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: collections,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
children.add(_buildResetBtn(context));
|
||||
Widget _buildSingleCollection(BuildContext context, {double? width, double? height, required WonderData data}) {
|
||||
List<CollectibleData> collectibles = collectiblesLogic.forWonder(data.type);
|
||||
|
||||
return Flexible(
|
||||
child: RepaintBoundary(
|
||||
child: ScrollDecorator.shadow(
|
||||
builder: (controller) => SingleChildScrollView(
|
||||
controller: controller,
|
||||
padding: EdgeInsets.all($styles.insets.md).copyWith(bottom: $styles.insets.offset * 2.5),
|
||||
child: Column(
|
||||
children: children,
|
||||
return Center(
|
||||
child: SizedBox(
|
||||
width: width ?? double.infinity,
|
||||
height: height ?? double.infinity,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
/// Title
|
||||
Text(
|
||||
data.title.toUpperCase(),
|
||||
key: data.type == scrollWonder ? scrollKey : null,
|
||||
textAlign: TextAlign.left,
|
||||
style: $styles.text.title1.copyWith(color: $styles.colors.offWhite),
|
||||
),
|
||||
),
|
||||
Gap($styles.insets.md),
|
||||
|
||||
/// Images
|
||||
Expanded(
|
||||
child: SeparatedRow(
|
||||
separatorBuilder: () => Gap($styles.insets.sm),
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
...collectibles.map((e) {
|
||||
int state = states[e.id] ?? CollectibleState.lost;
|
||||
return Flexible(
|
||||
child: _CollectionTile(
|
||||
collectible: e,
|
||||
state: state,
|
||||
onPressed: onPressed,
|
||||
heroTag: e.id == fromId ? 'collectible_image_$fromId' : null,
|
||||
),
|
||||
);
|
||||
}).toList()
|
||||
]),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCategoryTitle(BuildContext context, WonderData data, Key? key) {
|
||||
return Text(
|
||||
data.title.toUpperCase(),
|
||||
textAlign: TextAlign.left,
|
||||
key: key,
|
||||
style: $styles.text.title1.copyWith(color: $styles.colors.offWhite),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCollectibleRow(BuildContext context, WonderType wonder, Map<String, int> states) {
|
||||
final double height = $styles.insets.lg * 6;
|
||||
List<CollectibleData> list = collectiblesLogic.forWonder(wonder);
|
||||
if (list.isEmpty) return Container(height: height, color: $styles.colors.black);
|
||||
|
||||
List<Widget> children = [];
|
||||
for (int i = 0; i < list.length; i++) {
|
||||
if (i > 0) children.add(Gap($styles.insets.md));
|
||||
CollectibleData collectible = list[i];
|
||||
int state = states[collectible.id] ?? CollectibleState.lost;
|
||||
children.add(Flexible(
|
||||
child: _CollectionTile(
|
||||
collectible: collectible,
|
||||
state: state,
|
||||
onPressed: onPressed,
|
||||
heroTag: collectible.id == fromId ? 'collectible_image_$fromId' : null,
|
||||
),
|
||||
));
|
||||
}
|
||||
return SizedBox(height: height, child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: children));
|
||||
}
|
||||
|
||||
Widget _buildResetBtn(BuildContext context) {
|
||||
Widget btn = AppBtn.from(
|
||||
onPressed: onReset ?? () {},
|
||||
text: $strings.collectionButtonReset,
|
||||
isSecondary: true,
|
||||
expand: true,
|
||||
);
|
||||
return AnimatedOpacity(opacity: onReset == null ? 0.25 : 1, duration: $styles.times.fast, child: btn);
|
||||
}
|
||||
// TODO: Restore reset functionality somehow
|
||||
// Widget _buildResetBtn(BuildContext context) {
|
||||
// Widget btn = AppBtn.from(
|
||||
// onPressed: onReset ?? () {},
|
||||
// text: $strings.collectionButtonReset,
|
||||
// isSecondary: true,
|
||||
// expand: true,
|
||||
// );
|
||||
// return AnimatedOpacity(opacity: onReset == null ? 0.25 : 1, duration: $styles.times.fast, child: btn);
|
||||
// }
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user