Intial pass on collection screen

This commit is contained in:
Shawn 2022-10-27 10:24:28 -06:00
parent 630a7a38e5
commit b5157d14ce
3 changed files with 121 additions and 94 deletions

View File

@ -76,12 +76,14 @@ class _CollectionScreenState extends State<CollectionScreen> with GetItStateMixi
return ColoredBox( return ColoredBox(
color: $styles.colors.greyStrong, color: $styles.colors.greyStrong,
child: Stack(children: [ child: Column(
Positioned.fill( children: [
Expanded(
child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [ child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
SimpleHeader($strings.collectionTitleCollection), SimpleHeader($strings.collectionTitleCollection),
_NewlyDiscoveredRow(count: discovered, onPressed: _scrollToTarget), _NewlyDiscoveredRow(count: discovered, onPressed: _scrollToTarget),
_CollectionList( Flexible(
child: _CollectionList(
states: _states, states: _states,
fromId: widget.fromId, fromId: widget.fromId,
scrollKey: _scrollKey, scrollKey: _scrollKey,
@ -89,13 +91,12 @@ class _CollectionScreenState extends State<CollectionScreen> with GetItStateMixi
onPressed: (o) => _showDetails(context, o), onPressed: (o) => _showDetails(context, o),
onReset: discovered + explored > 0 ? _handleReset : null, onReset: discovered + explored > 0 ? _handleReset : null,
), ),
]),
),
Positioned.fill(
top: null,
child: _CollectionFooter(count: discovered + explored, total: total),
), ),
]), ]),
),
_CollectionFooter(count: discovered + explored, total: total),
],
),
); );
} }
} }

View File

@ -10,19 +10,23 @@ class _CollectionFooter extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Stack(children: [ return Stack(children: [
Transform.translate( // TODO SB: Maybe restore this gradient? Need to come up with alternate approach since list can now scroll horizontally
offset: Offset(0, -$styles.insets.xl), // Transform.translate(
child: VtGradient( // offset: Offset(0, -$styles.insets.xl),
[$styles.colors.greyStrong.withOpacity(0), $styles.colors.greyStrong], // child: VtGradient(
const [0, 1], // [$styles.colors.greyStrong.withOpacity(0), $styles.colors.greyStrong],
height: $styles.insets.xl, // const [0, 1],
), // height: $styles.insets.xl,
), // ),
// ),
Container( Container(
padding: EdgeInsets.symmetric(horizontal: $styles.insets.md, vertical: $styles.insets.sm), padding: EdgeInsets.symmetric(horizontal: $styles.insets.md, vertical: $styles.insets.sm),
color: $styles.colors.greyStrong, color: $styles.colors.greyStrong,
child: SafeArea( child: SafeArea(
top: false, top: false,
child: Center(
child: SizedBox(
width: $styles.sizes.maxContentWidth1,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
@ -33,6 +37,8 @@ class _CollectionFooter extends StatelessWidget {
], ],
), ),
), ),
),
),
) )
]); ]);
} }

View File

@ -22,70 +22,90 @@ class _CollectionList extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
List<WonderData> wonders = wondersLogic.all; List<WonderData> wonders = wondersLogic.all;
List<Widget> children = []; bool vtMode = context.isLandscape == false;
for (int i = 0; i < wonders.length; i++) { // Create list of collections that is shared by both hz and vt layouts
WonderData data = wonders[i]; List<Widget> collections = [
children.add(_buildCategoryTitle(context, data, data.type == scrollWonder ? scrollKey : null)); ...wonders.map((d) {
children.add(Gap($styles.insets.md)); return _buildSingleCollection(
children.add(_buildCollectibleRow(context, data.type, states)); context,
children.add(Gap($styles.insets.xl)); 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( return Center(
child: RepaintBoundary( child: SizedBox(
child: ScrollDecorator.shadow( width: width ?? double.infinity,
builder: (controller) => SingleChildScrollView( height: height ?? double.infinity,
controller: controller,
padding: EdgeInsets.all($styles.insets.md).copyWith(bottom: $styles.insets.offset * 2.5),
child: Column( child: Column(
children: children, mainAxisAlignment: MainAxisAlignment.center,
), children: [
), /// Title
), Text(
),
);
}
Widget _buildCategoryTitle(BuildContext context, WonderData data, Key? key) {
return Text(
data.title.toUpperCase(), data.title.toUpperCase(),
key: data.type == scrollWonder ? scrollKey : null,
textAlign: TextAlign.left, textAlign: TextAlign.left,
key: key,
style: $styles.text.title1.copyWith(color: $styles.colors.offWhite), style: $styles.text.title1.copyWith(color: $styles.colors.offWhite),
); ),
} Gap($styles.insets.md),
Widget _buildCollectibleRow(BuildContext context, WonderType wonder, Map<String, int> states) { /// Images
final double height = $styles.insets.lg * 6; Expanded(
List<CollectibleData> list = collectiblesLogic.forWonder(wonder); child: SeparatedRow(
if (list.isEmpty) return Container(height: height, color: $styles.colors.black); separatorBuilder: () => Gap($styles.insets.sm),
crossAxisAlignment: CrossAxisAlignment.stretch,
List<Widget> children = []; children: [
for (int i = 0; i < list.length; i++) { ...collectibles.map((e) {
if (i > 0) children.add(Gap($styles.insets.md)); int state = states[e.id] ?? CollectibleState.lost;
CollectibleData collectible = list[i]; return Flexible(
int state = states[collectible.id] ?? CollectibleState.lost;
children.add(Flexible(
child: _CollectionTile( child: _CollectionTile(
collectible: collectible, collectible: e,
state: state, state: state,
onPressed: onPressed, onPressed: onPressed,
heroTag: collectible.id == fromId ? 'collectible_image_$fromId' : null, heroTag: e.id == fromId ? 'collectible_image_$fromId' : null,
), ),
)); );
} }).toList()
return SizedBox(height: height, child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: children)); ]),
)
],
),
),
);
} }
Widget _buildResetBtn(BuildContext context) { // TODO: Restore reset functionality somehow
Widget btn = AppBtn.from( // Widget _buildResetBtn(BuildContext context) {
onPressed: onReset ?? () {}, // Widget btn = AppBtn.from(
text: $strings.collectionButtonReset, // onPressed: onReset ?? () {},
isSecondary: true, // text: $strings.collectionButtonReset,
expand: true, // isSecondary: true,
); // expand: true,
return AnimatedOpacity(opacity: onReset == null ? 0.25 : 1, duration: $styles.times.fast, child: btn); // );
} // return AnimatedOpacity(opacity: onReset == null ? 0.25 : 1, duration: $styles.times.fast, child: btn);
// }
} }