info: improved metadata section build

lib/widgets/fullscreen/info/metadata_section.dart

@@ -7,6 +7,7 @@ import 'package:aves/widgets/common/fx/highlight_decoration.dart';
 import 'package:aves/widgets/fullscreen/info/info_page.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
+import 'package:tuple/tuple.dart';
 
 class MetadataSectionSliver extends StatefulWidget {
   final ImageEntry entry;
@@ -24,11 +25,15 @@ class MetadataSectionSliver extends StatefulWidget {
 }
 
 class _MetadataSectionSliverState extends State<MetadataSectionSliver> with AutomaticKeepAliveClientMixin {
-  Map _metadata;
+  List<_MetadataDirectory> _metadata = [];
   String _loadedMetadataUri;
 
+  int get columnCount => widget.columnCount;
+
   bool get isVisible => widget.visibleNotifier.value;
 
+  static const int maxValueLength = 140;
+
   @override
   void initState() {
     super.initState();
@@ -61,31 +66,51 @@ class _MetadataSectionSliverState extends State<MetadataSectionSliver> with Auto
   @override
   Widget build(BuildContext context) {
     super.build(context);
-    final directoryNames = (_metadata?.keys?.toList() ?? [])..sort();
+
-    return SliverStaggeredGrid.countBuilder(
+    final itemCount = _metadata.isEmpty ? 0 : _metadata.length + 1;
-      crossAxisCount: widget.columnCount,
+    final itemBuilder = (context, index) => index == 0 ? const SectionRow('Metadata') : _DirectoryWidget(_metadata[index - 1]);
-      staggeredTileBuilder: (index) => StaggeredTile.fit(index == 0 ? widget.columnCount : 1),
+
-      itemBuilder: (context, index) {
+    // SliverStaggeredGrid is not as efficient as SliverList when there is only one column
-        return index == 0
+    return columnCount == 1
-            ? const SectionRow('Metadata')
+        ? SliverList(
-            : _Directory(
+            delegate: SliverChildBuilderDelegate(
-                metadataMap: _metadata,
+              itemBuilder,
-                directoryName: directoryNames[index - 1],
+              childCount: itemCount,
-              );
+            ),
-      },
+          )
-      itemCount: directoryNames.isEmpty ? 0 : directoryNames.length + 1,
+        : SliverStaggeredGrid.countBuilder(
-      mainAxisSpacing: 0,
+            crossAxisCount: columnCount,
-      crossAxisSpacing: 8,
+            staggeredTileBuilder: (index) => StaggeredTile.fit(index == 0 ? columnCount : 1),
-    );
+            itemBuilder: itemBuilder,
+            itemCount: itemCount,
+            mainAxisSpacing: 0,
+            crossAxisSpacing: 8,
+          );
   }
 
   Future<void> _getMetadata() async {
     if (_loadedMetadataUri == widget.entry.uri) return;
     if (isVisible) {
-      _metadata = await MetadataService.getAllMetadata(widget.entry);
+      final rawMetadata = await MetadataService.getAllMetadata(widget.entry) ?? {};
+      _metadata = rawMetadata.entries.map((kv) {
+        final String directoryName = kv.key as String ?? '';
+        final Map rawTags = kv.value as Map ?? {};
+        final List<Tuple2<String, String>> tags = rawTags.entries
+            .map((kv) {
+              final value = kv.value as String ?? '';
+              if (value.isEmpty) return null;
+              final tagName = kv.key as String ?? '';
+              return Tuple2(tagName, value.length > maxValueLength ? '${value.substring(0, maxValueLength)}…' : value);
+            })
+            .where((tag) => tag != null)
+            .toList()
+              ..sort((a, b) => a.item1.compareTo(b.item1));
+        return _MetadataDirectory(directoryName, tags);
+      }).toList()
+        ..sort((a, b) => a.name.compareTo(b.name));
       _loadedMetadataUri = widget.entry.uri;
     } else {
-      _metadata = null;
+      _metadata = [];
       _loadedMetadataUri = null;
     }
     if (mounted) setState(() {});
@@ -95,50 +120,60 @@ class _MetadataSectionSliverState extends State<MetadataSectionSliver> with Auto
   bool get wantKeepAlive => true;
 }
 
-class _Directory extends StatelessWidget {
+class _DirectoryWidget extends StatelessWidget {
-  final Map metadataMap;
+  final _MetadataDirectory directory;
-  final String directoryName;
 
-  static const int maxValueLength = 140;
+  const _DirectoryWidget(this.directory);
-
-  const _Directory({@required this.metadataMap, @required this.directoryName});
 
   @override
   Widget build(BuildContext context) {
-    final directory = metadataMap[directoryName];
-    final tagKeys = directory.keys.toList()..sort();
-
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        if (directoryName.isNotEmpty)
+        if (directory.name.isNotEmpty) _DirectoryTitle(directory.name),
-          Container(
+        ...directory.tags.map((tag) => InfoRow(tag.item1, tag.item2)),
-            decoration: HighlightDecoration(
-              color: stringToColor(directoryName),
-            ),
-            margin: const EdgeInsets.symmetric(vertical: 4.0),
-            child: Text(
-              directoryName,
-              style: const TextStyle(
-                shadows: [
-                  Shadow(
-                    color: Colors.black,
-                    offset: Offset(1, 1),
-                    blurRadius: 2,
-                  )
-                ],
-                fontSize: 18,
-                fontFamily: 'Concourse Caps',
-              ),
-            ),
-          ),
-        ...tagKeys.map((tagKey) {
-          final value = directory[tagKey] as String;
-          if (value == null || value.isEmpty) return const SizedBox.shrink();
-          return InfoRow(tagKey, value.length > maxValueLength ? '${value.substring(0, maxValueLength)}…' : value);
-        }),
         const SizedBox(height: 16),
       ],
     );
   }
 }
+
+class _DirectoryTitle extends StatelessWidget {
+  final String name;
+
+  const _DirectoryTitle(this.name);
+
+  @override
+  Widget build(BuildContext context) {
+    return Align(
+      alignment: Alignment.centerLeft,
+      child: Container(
+        decoration: HighlightDecoration(
+          color: stringToColor(name),
+        ),
+        margin: const EdgeInsets.symmetric(vertical: 4.0),
+        child: Text(
+          name,
+          style: const TextStyle(
+            shadows: [
+              Shadow(
+                color: Colors.black,
+                offset: Offset(1, 1),
+                blurRadius: 2,
+              )
+            ],
+            fontSize: 18,
+            fontFamily: 'Concourse Caps',
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _MetadataDirectory {
+  final String name;
+  final List<Tuple2<String, String>> tags;
+
+  const _MetadataDirectory(this.name, this.tags);
+}