diff --git a/lib/pangea/analytics_details_popup/morph_analytics_list_view.dart b/lib/pangea/analytics_details_popup/morph_analytics_list_view.dart index 86edecb6a..d7a8fc75e 100644 --- a/lib/pangea/analytics_details_popup/morph_analytics_list_view.dart +++ b/lib/pangea/analytics_details_popup/morph_analytics_list_view.dart @@ -30,31 +30,38 @@ class MorphAnalyticsListView extends StatelessWidget { @override Widget build(BuildContext context) { + final padding = FluffyThemes.isColumnMode(context) + ? const EdgeInsets.all(16.0) + : EdgeInsets.zero; + return Padding( - padding: FluffyThemes.isColumnMode(context) - ? const EdgeInsets.all(16.0) - : const EdgeInsets.all(0.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - // Add your text widget here - const InstructionsInlineTooltip( - instructionsEnum: InstructionsEnum.morphAnalyticsList, - ), - if (!InstructionsEnum.morphAnalyticsList.isToggledOff) - const SizedBox(height: 16.0), - if (kIsWeb) - const Row( - mainAxisAlignment: MainAxisAlignment.end, - children: [ - DownloadAnalyticsButton(), - ], + padding: padding, + child: CustomScrollView( + key: const PageStorageKey('morph-analytics'), + slivers: [ + const SliverToBoxAdapter( + child: InstructionsInlineTooltip( + instructionsEnum: InstructionsEnum.morphAnalyticsList, ), - Expanded( - child: ListView.builder( - key: const PageStorageKey('morph-analytics'), - itemCount: controller.features.length, - itemBuilder: (context, index) { + ), + + if (!InstructionsEnum.morphAnalyticsList.isToggledOff) + const SliverToBoxAdapter(child: SizedBox(height: 16.0)), + + if (kIsWeb) + const SliverToBoxAdapter( + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + DownloadAnalyticsButton(), + ], + ), + ), + + // Morph feature boxes + SliverList( + delegate: SliverChildBuilderDelegate( + (context, index) { final feature = controller.features[index]; return feature.displayTags.isNotEmpty ? Padding( @@ -69,6 +76,7 @@ class MorphAnalyticsListView extends StatelessWidget { ) : const SizedBox.shrink(); }, + childCount: controller.features.length, ), ), ], diff --git a/lib/pangea/analytics_details_popup/vocab_analytics_list_view.dart b/lib/pangea/analytics_details_popup/vocab_analytics_list_view.dart index c57c5fcbe..cbfd70ef1 100644 --- a/lib/pangea/analytics_details_popup/vocab_analytics_list_view.dart +++ b/lib/pangea/analytics_details_popup/vocab_analytics_list_view.dart @@ -88,9 +88,6 @@ class VocabAnalyticsListView extends StatelessWidget { return Column( children: [ - const InstructionsInlineTooltip( - instructionsEnum: InstructionsEnum.analyticsVocabList, - ), AnimatedContainer( duration: const Duration(milliseconds: 300), curve: Curves.easeInOut, @@ -138,26 +135,40 @@ class VocabAnalyticsListView extends StatelessWidget { ), ), Expanded( - child: GridView.builder( + child: CustomScrollView( key: const PageStorageKey("vocab-analytics-list-view-page-key"), - gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent( - maxCrossAxisExtent: 100.0, - mainAxisExtent: 100.0, - crossAxisSpacing: 8.0, - mainAxisSpacing: 8.0, - ), - itemCount: _filteredVocab.length, - itemBuilder: (context, index) { - final vocabItem = _filteredVocab[index]; - return VocabAnalyticsListTile( - onTap: () => context.go( - "/rooms/analytics/${vocabItem.id.type.string}/${vocabItem.id.string}", + slivers: [ + // Full-width tooltip + const SliverToBoxAdapter( + child: InstructionsInlineTooltip( + instructionsEnum: InstructionsEnum.analyticsVocabList, ), - constructUse: vocabItem, - emoji: vocabItem.id.userSetEmoji.firstOrNull ?? - vocabItem.id.getLemmaInfoCached()?.emoji.firstOrNull, - ); - }, + ), + + // Grid of vocab tiles + SliverGrid( + gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent( + maxCrossAxisExtent: 100.0, + mainAxisExtent: 100.0, + crossAxisSpacing: 8.0, + mainAxisSpacing: 8.0, + ), + delegate: SliverChildBuilderDelegate( + (context, index) { + final vocabItem = _filteredVocab[index]; + return VocabAnalyticsListTile( + onTap: () => context.go( + "/rooms/analytics/${vocabItem.id.type.string}/${vocabItem.id.string}", + ), + constructUse: vocabItem, + emoji: vocabItem.id.userSetEmoji.firstOrNull ?? + vocabItem.id.getLemmaInfoCached()?.emoji.firstOrNull, + ); + }, + childCount: _filteredVocab.length, + ), + ), + ], ), ), ],