diff --git a/lib/ui/screens/collection/collection_screen.dart b/lib/ui/screens/collection/collection_screen.dart index 05faf49a..2e1921f4 100644 --- a/lib/ui/screens/collection/collection_screen.dart +++ b/lib/ui/screens/collection/collection_screen.dart @@ -76,26 +76,27 @@ class _CollectionScreenState extends State 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), + ], + ), ); } } diff --git a/lib/ui/screens/collection/widgets/_collection_footer.dart b/lib/ui/screens/collection/widgets/_collection_footer.dart index 43e90d19..0f28e27e 100644 --- a/lib/ui/screens/collection/widgets/_collection_footer.dart +++ b/lib/ui/screens/collection/widgets/_collection_footer.dart @@ -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), + ], + ), + ), ), ), ) diff --git a/lib/ui/screens/collection/widgets/_collection_list.dart b/lib/ui/screens/collection/widgets/_collection_list.dart index f3937035..e9470843 100644 --- a/lib/ui/screens/collection/widgets/_collection_list.dart +++ b/lib/ui/screens/collection/widgets/_collection_list.dart @@ -22,70 +22,90 @@ class _CollectionList extends StatelessWidget { @override Widget build(BuildContext context) { List wonders = wondersLogic.all; - List 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 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 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 states) { - final double height = $styles.insets.lg * 6; - List list = collectiblesLogic.forWonder(wonder); - if (list.isEmpty) return Container(height: height, color: $styles.colors.black); - - List 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); + // } }