removed keys from slivers to fix rendering order issue

lib/model/image_collection.dart

@@ -8,7 +8,7 @@ import 'package:path/path.dart';
 
 class ImageCollection with ChangeNotifier {
   final List<ImageEntry> _rawEntries;
-  Map<dynamic, List<ImageEntry>> sections = {};
+  Map<dynamic, List<ImageEntry>> sections = Map.unmodifiable({});
   GroupFactor groupFactor = GroupFactor.month;
   SortFactor sortFactor = SortFactor.date;
   List<String> sortedAlbums = List.unmodifiable(const Iterable.empty());
@@ -48,23 +48,22 @@ class ImageCollection with ChangeNotifier {
       case SortFactor.date:
         switch (groupFactor) {
           case GroupFactor.album:
-            sections = groupBy(_rawEntries, (entry) => entry.directory);
+            sections = Map.unmodifiable(groupBy(_rawEntries, (entry) => entry.directory));
             break;
           case GroupFactor.month:
-            sections = groupBy(_rawEntries, (entry) => entry.monthTaken);
+            sections = Map.unmodifiable(groupBy(_rawEntries, (entry) => entry.monthTaken));
             break;
           case GroupFactor.day:
-            sections = groupBy(_rawEntries, (entry) => entry.dayTaken);
+            sections = Map.unmodifiable(groupBy(_rawEntries, (entry) => entry.dayTaken));
             break;
         }
         break;
       case SortFactor.size:
-        sections = Map.fromEntries([
+        sections = Map.unmodifiable(Map.fromEntries([
-          MapEntry('All', _rawEntries),
+          MapEntry(null, _rawEntries),
-        ]);
+        ]));
         break;
     }
-    debugPrint('$runtimeType updateSections notifyListeners');
     notifyListeners();
   }
 

lib/widgets/album/collection_section.dart

@@ -11,56 +11,58 @@ import 'package:provider/provider.dart';
 
 class SectionSliver extends StatelessWidget {
   final ImageCollection collection;
-  final Map<dynamic, List<ImageEntry>> sections;
   final dynamic sectionKey;
 
+  static const columnCount = 4;
+
   const SectionSliver({
     Key key,
     @required this.collection,
-    @required this.sections,
     @required this.sectionKey,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    const columnCount = 4;
+    final sections = collection.sections;
+
+    final sliver = SliverGrid(
+      delegate: SliverChildBuilderDelegate(
+        // TODO TLAD find out why thumbnails are rebuilt (with `initState`)
+        (context, index) {
+          final sectionEntries = sections[sectionKey];
+          if (index >= sectionEntries.length) return null;
+          final entry = sectionEntries[index];
+          return GestureDetector(
+            key: ValueKey(entry.uri),
+            onTap: () => _showFullscreen(context, entry),
+            child: Selector<MediaQueryData, double>(
+              selector: (c, mq) => mq.size.width,
+              builder: (c, mqWidth, child) {
+                return Thumbnail(
+                  entry: entry,
+                  extent: mqWidth / columnCount,
+                );
+              },
+            ),
+          );
+        },
+        childCount: sections[sectionKey].length,
+        addAutomaticKeepAlives: false,
+        addRepaintBoundaries: true,
+      ),
+      // TODO TLAD custom SliverGridDelegate / SliverGridLayout to lerp between columnCount
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: columnCount,
+      ),
+    );
+
     return SliverStickyHeader(
       header: SectionHeader(
         collection: collection,
         sections: sections,
         sectionKey: sectionKey,
       ),
-      sliver: SliverGrid(
+      sliver: sliver,
-        delegate: SliverChildBuilderDelegate(
-          // TODO TLAD find out why thumbnails are rebuilt (with `initState`) when:
-          // - config change (show/hide status bar)
-          (context, index) {
-            final sectionEntries = sections[sectionKey];
-            if (index >= sectionEntries.length) return null;
-            final entry = sectionEntries[index];
-            return GestureDetector(
-              key: ValueKey(entry.uri),
-              onTap: () => _showFullscreen(context, entry),
-              child: Selector<MediaQueryData, double>(
-                selector: (c, mq) => mq.size.width,
-                builder: (c, mqWidth, child) {
-                  return Thumbnail(
-                    entry: entry,
-                    extent: mqWidth / columnCount,
-                  );
-                },
-              ),
-            );
-          },
-          childCount: sections[sectionKey].length,
-          addAutomaticKeepAlives: false,
-          addRepaintBoundaries: true,
-        ),
-        // TODO TLAD custom SliverGridDelegate / SliverGridLayout to lerp between columnCount
-        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-          crossAxisCount: columnCount,
-        ),
-      ),
       overlapsContent: false,
     );
   }

lib/widgets/album/thumbnail_collection.dart

@@ -34,11 +34,7 @@ class ThumbnailCollection extends StatelessWidget {
       slivers: [
         if (appBar != null) appBar,
         ...sectionKeys.map((sectionKey) => SectionSliver(
-              // need key to prevent section header mismatch
-              // but it should not be unique key, otherwise sections are rebuilt when changing page
-              key: ValueKey(sectionKey),
               collection: collection,
-              sections: sections,
               sectionKey: sectionKey,
             )),
         SliverToBoxAdapter(
@@ -59,7 +55,7 @@ class ThumbnailCollection extends StatelessWidget {
           return DraggableScrollbar.arrows(
             controller: _scrollController,
             padding: EdgeInsets.only(
-              // top padding to adjust scroll thumb
+              // padding to get scroll thumb below app bar, above nav bar
               top: topPadding,
               bottom: mqViewInsetsBottom,
             ),